使用CSS实现图片分割效果的简单方法介绍
2021-05-08 21:11:12 我们来看一个例子,大家肯定能明白css是怎么样实现分割图片的。
CSS Code复制内容到剪贴板
<HTML><head><metahttp-equiv="Content-Type"content="text/html;charset=utf8"/><styletype="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:00;#背景位置放到最左上角height:50px;#div的高度width:50px;#div的宽度}</style></head><body><divclass="photo1"></div><strong>他们二个分家了</srong><divclass="photo2"></div></body></HTML>下面看一下页面上显示的结果是什么
通过css我们把一个图片,分成二部分。
当我们定义了background-position: 0 0;此时背景图片将被定位于对象不包括补丁( padding )的内容区域的左上角,height:50px;width:50px;通过这个属性设置,也就是说向右下拉了一块面积。
当我们定义了background-position: 100% 100%;此时背景图片将被定位于对象不包括补丁( padding )的内容区域的右下角,height:50px;width:50px;通过这个属性设置,也就是说向左上拉了一块面积。
上面只是根表像的一点理解。纯属个人观点
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。 如涉及版权问题,请提交至online#300.cn邮箱联系删除。