阅读448 返回首页    go 阿里云 go 技术社区[云栖]

精通css（6）-图像背景那些事儿

1.背景图像

先说一下background的用法。

通常使用简写形式：background：背景色 背景图 重复方式 定位方式  图像位置，比如background: #00FF00 url(bgimage.gif) no-repeat fixed top;

background-position有center属性，可以让背景居中。

如果使用像素对背景定位，如background-position：20px 20px；位置是从父元素左上角到图像左上角算的。如果使用百分比，如background-position：20% 20%；

位置则是从图片上距左上角x,y距离20%的点到父元素左上角来算的。


2.圆角图像

这里只介绍css3中的方法，不支持的浏览器就见鬼去吧，大不了看到的是直角。

以前的做法是用圆角图像填充图像的四个角，这样为了一个圆角效果会加很多无意义的东西。用css3的话可以一次添加多个图像：

{
	background-image: url(top-left.gif),
	                  url(top-right.gif),
	                  url(bottom-left.gif),
	                  url(bottom-right.gif);
	background-repeat: no-repeat,
		           no-repeat,
			   no-repeat,
			   no-repeat;
	background-position: top left,
	       		     top right,
	       		     bottom left,
			     bottom right;				   

}
还可以用border-radius: 

{
	border-radius: 5%;			   
	-webkit-border-radius: 5%;	
	-moz-border-radius: 5%;	
}
最后要说的是border-image属性，利用强大的九分缩放法。就是把一张背景图通过百分比划分成九个部分，这样在图片缩放的时候这九个部分就作为单独的块来缩放。


我要说的是这个功能真的很酷炫，具体的说明参考https://www.w3school.com.cn/cssref/pr_border-image.asp

3.投影

既然css3已经有强大的box-shadow了，那么以前弱爆的方法就应该淘汰了！

用法参考:https://www.w3school.com.cn/cssref/pr_box-shadow.asp或者https://www.w3cplus.com/content/css3-box-shadow

4.不透明度

老方法：
{
	opacity: 0.5;
	filter:alpha(opacity=50);
}

简单的方法：
{
    background-color:rgba(255,0,0,0.5);
}
IE下6不支持透明度，需要使用AlphaImageLoder过滤器，或者使用微软专有css扩展-行为（behavior），下载合适的.htc文件并在IE6专用的样式表中引用它就行了。

5.css Sprite

将许多图片合成在一张大图里，然后偏移量来获取想要的小图片，这就是css的Sprite精灵。可以减少图片的请求量，减少服务器压力。Sprite主要是通过background-position和height，width来实现。一张图就能理解：




最后更新：2017-04-03 14:54:06

  上一篇：go poj 1528 Perfection
  下一篇：go poj 1517 u Calculate e