如何利用設定影像效果？ （程式碼實例）
- 云罗郡主原創
- 2018-11-09 15:59:381612瀏覽
這篇文章帶給大家的內容是關於如何利用設定圖像效果，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
圖片在任何網頁中都扮演著重要角色。雖然不建議包含大量圖像，但在任何需要的地方使用好的圖像仍然很重要。
CSS在控制影像顯示方面起著很好的作用。您可以使用CSS設定下列影像屬性。
邊界屬性被用來設定的圖像邊界的寬度。
高度屬性用於設定影像的高度。
寬度屬性用於設定影像的寬度。
所述-moz不透明度屬性用於設定影像的不透明度。
1.圖像邊框屬性
圖像的border屬性用於設定圖像邊框的寬度。此屬性的長度或值可以是％。
零像素寬度表示沒有邊框，範例：
<html>
<head>
</head>
<body>
<img style = "border:0px;" src = "https://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg" / alt="如何利用設定影像效果？ （程式碼實例）" >
<br />
<img 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 style = "border:1px solid red; height:100px;" src = "https://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg" / alt="如何利用設定影像效果？ （程式碼實例）" >
<br />
<img 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 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>效果如下：
以上就是如何利用設定影像效果的全部介紹，如果您想了解更多有關CSS3影片教學，請關注PHP中文網。
以上是如何利用設定影像效果？ （程式碼實例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn