如何利用設定影像效果？（程式碼實例）-css教學-PHP中文網

首頁

web前端

css教學

如何利用設定影像效果？（程式碼實例）

云罗郡主

Nov 09, 2018 pm 03:59 PM

這篇文章帶給大家的內容是關於如何利用設定圖像效果，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

圖片在任何網頁中都扮演著重要角色。雖然不建議包含大量圖像，但在任何需要的地方使用好的圖像仍然很重要。

CSS在控制影像顯示方面起著很好的作用。您可以使用CSS設定下列影像屬性。

邊界屬性被用來設定的圖像邊界的寬度。

高度屬性用於設定影像的高度。

寬度屬性用於設定影像的寬度。

所述-moz不透明度屬性用於設定影像的不透明度。

1.圖像邊框屬性

圖像的border屬性用於設定圖像邊框的寬度。此屬性的長度或值可以是％。

零像素寬度表示沒有邊框，範例：

<html>
   <head>
   </head>
   <body>
      <img  src="/static/imghw/default1.png"  data-src="https://img.php.cn//upload/image/154/597/505/1541749725963338.png"  class="lazy"  style = "border:0px;" src = "https://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg" / alt="如何利用設定影像效果？ （程式碼實例）" >
      <br />
      <img  src="/static/imghw/default1.png"  data-src="https://img.php.cn//upload/image/154/597/505/1541749725963338.png"  class="lazy"  style = "border:3px dashed red;" src = "https://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg" / alt="如何利用設定影像效果？ （程式碼實例）" >
   </body>
</html>

登入後複製

顯示效果如下：

如何利用設定影像效果？（程式碼實例）

2.圖片高度設定屬性：

圖像的width屬性用於設定圖像的寬度。此屬性的長度或值可以是％。雖然以％表示值，但它適用於圖像可用的框。案例如下：

<html>
   <head>
   </head>
   <body>
      <img  src="/static/imghw/default1.png"  data-src="https://img.php.cn//upload/image/996/544/135/1541749915916713.png"  class="lazy"  style = "border:1px solid red; height:100px;" src = "https://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg" / alt="如何利用設定影像效果？ （程式碼實例）" >
      <br />
      <img  src="/static/imghw/default1.png"  data-src="https://img.php.cn//upload/image/996/544/135/1541749915916713.png"  class="lazy"  style = "border:1px solid red; height:50%;" src = "https://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg" / alt="如何利用設定影像效果？ （程式碼實例）" >
   </body>
</html>

登入後複製

如何利用設定影像效果？（程式碼實例）

3.moz-opacity屬性

影像的-moz-opacity屬性用於設定影像的不透明度。此屬性用於在Mozilla中建立透明影像。 IE使用filter：alpha（opacity = x）來創建透明圖像。【建議閱讀：css如何實現影像的透明與不透明】

在Mozilla中（-moz-opacity：x）x可以是0.0到1.0之間的值。較低的值使元素更透明（CSS3有效語法不透明度相同：x）。

在IE中（filter：alpha（opacity = x））x可以是0到100之間的值。較低的值使元素更透明。程式碼如下：

<html>
   <head>
   </head>
   <body>
      <img  src="/static/imghw/default1.png"  data-src="https://img.php.cn//upload/image/369/557/389/1541750120148707.png"  class="lazy"  style = "border:1px solid red; -moz-opacity:0.4; filter:alpha(opacity=40);" src = "https://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg" / alt="如何利用設定影像效果？ （程式碼實例）" >
   </body>
</html>

登入後複製

效果如下：

如何利用設定影像效果？（程式碼實例）