首页 > 开发 > CSS > 正文

使用CSS实现图片分割效果的简单方法介绍

2024-07-11 08:33:20

字体：大中小

来源：转载

供稿：网友

我们来看一个例子，大家肯定能明白css是怎么样实现分割图片的。

CSS Code复制内容到剪贴板

<HTML> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" /> <style type="text/css">
.photo1 { background-image: url("css_cut.gif"); #定义了一个背景图片
background-position: 100% 100%; #背景位置放到最右下角 height: 50px; #div的高度
width: 50px; #div的宽度 }
.photo2 {
background-image: url("css_cut.gif"); #定义了一个背景图片，和上面的图片是一样的 background-position: 0 0; #背景位置放到最左上角
height: 50px; #div的高度 width: 50px; #div的宽度
} </style>
</head> <body>
<div class="photo1"> </div> <strong>他们二个分家了</srong>
<div class="photo2"> </div> </body>
</HTML>

上一篇：详解CSS的结构与层叠以及格式化

下一篇：浅谈css3新单位vw、vh、vmin、vmax的使用详解

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注

新闻热点

最牛同桌！我考了696分我同桌考了703分

2024-06-26 22:28:41

650分！高二女生考入北大：遗憾不能上高三

2024-06-26 22:26:16

男生估分600只考了397 妈妈：高考虽重要，但不代表所有

2024-06-26 22:23:01

唐尚珺回应是否会直播带货：有人出100万想和他合作！

2024-06-25 19:29:23

名校抢人名场面：清华、北大太拼了！

2024-06-25 19:22:14

男生高考语文满分！网友：第一次听说

2024-06-25 19:19:15

疑难解答

图片精选

网友关注