无涯教程-CSS - 图片(Images)

时间：2024-01-24 07:02:43

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

相关文章