关注我们

CSS - 图片(Images)

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>

它将产生以下输出-

祝学习愉快！(内容编辑有误？请选中要编辑内容 -> 右键 -> 修改 -> 提交！)

技术教程推荐

好记忆不如烂笔头。留下您的足迹吧 :)