CSS - 使用图像

图像在任何网页中都发挥着重要作用。虽然不建议包含大量图像，但在需要的地方使用好的图像仍然很重要。

CSS对于控制图像的显示起到了很好的作用。您可以使用 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>

它将产生以下结果 -

图像宽度属性

图像的宽度属性用于设置图像的宽度。该属性的值可以是长度或百分比。虽然以百分比形式给出值，但它会将其应用于图像可用的框。

这是一个例子 -

现场演示 
<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 之间的值。较低的值使元素更加透明（CSS3 有效语法 opacity:x 也是如此）。

在 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>

它将产生以下结果 -