CSS在控制图像显示方面起着很好的作用。
border : 用于设置图像边框的宽度。
height : 用于设置图像的高度。
width : 用于设置图像的宽度。
-moz-opacity : 用于设置图像的透明度。
图像边框
图像的 border 属性用于设置图像边框的宽度。此属性的长度或百分比值都可以。零像素的宽度表示没有边框。
<html> <head> </head> <body> <img style="border:0px;" src="/css/images/logo.png" /> <br /> <img style="border:3px dashed red;" src="/css/images/logo.png" /> </body> </html>
它将产生以下输出-
图像高度
图像的 height 属性用于设置图像的高度。此属性的长度或百分比值都可以。在以%给出值时,它会将其应用于有图像的框。
<html> <head> </head> <body> <img style="border:1px solid red; height:100px;" src="/css/images/logo.png" /> <br /> <img style="border:1px solid red; height:50%;" src="/css/images/logo.png" /> </body> </html>
它将产生以下输出-
图像宽度
图像的 width 属性用于设置图像的宽度。此属性的长度或百分比值都可以。在以%给出值时,它会将其应用于有图像的框。
<html> <head> </head> <body> <img style="border:1px solid red; width:150px;" src="/css/images/logo.png" /> <br /> <img style="border:1px solid red; width:100%;" src="/css/images/logo.png" /> </body> </html>
它将产生以下输出-
-moz-opacity 属性
图像的 -moz-opacity 属性用于设置图像的透明度,此属性用于在Mozilla中创建透明图像。 IE使用 filter:alpha(opacity=x)创建透明图像。
在Mozilla(-moz-opacity:x)中,x可以是0.0-1.0的值。
在IE(filter:alpha(opacity=x))中,x可以是0到100之间的值。较低的值会使元素更透明。
<html> <head> </head> <body> <img style="border:1px solid red; -moz-opacity:0.4; filter:alpha(opacity=40);" src="/css/images/logo.png" /> </body> </html>
它将产生以下输出-
参考链接
https://www.learnfk.com/css/css-images.html