溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下使用CSS設置圖像效果的方法，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！
圖像在任何網頁中都扮演著重要角色。雖然不建議包含大量圖像，但在任何需要的地方使用好的圖像仍然很重要。
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" />
<br />
<img style = "border:3px dashed red;" src = "https://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg" />
</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" />
<br />
<img style = "border:1px solid red; height:50%;" src = "https://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg" />
</body>
</html>
3.moz-opacity屬性
圖像的-moz-opacity屬性用于設置圖像的不透明度。此屬性用于在Mozilla中創建透明圖像。IE使用filter：alpha（opacity = x）來創建透明圖像。
在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" />
</body>
</html>效果如下：
看完了這篇文章，相信你對使用CSS設置圖像效果的方法有了一定的了解，想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
