溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下使用CSS設(shè)置圖像效果的方法，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！
圖像在任何網(wǎng)頁(yè)中都扮演著重要角色。雖然不建議包含大量圖像，但在任何需要的地方使用好的圖像仍然很重要。
CSS在控制圖像顯示方面起著很好的作用。您可以使用CSS設(shè)置以下圖像屬性。
邊界屬性被用于設(shè)置的圖像邊界的寬度。
高度屬性用于設(shè)置圖像的高度。
寬度屬性用于設(shè)置圖像的寬度。
所述-moz不透明度屬性用于設(shè)置圖像的不透明度。
1.圖像邊框?qū)傩?/p>
圖像的border屬性用于設(shè)置圖像邊框的寬度。此屬性的長(zhǎng)度或值可以是％。
零像素寬度表示沒(méi)有邊框，例子：
<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.圖像高度設(shè)置屬性：
圖像的width屬性用于設(shè)置圖像的寬度。此屬性的長(zhǎng)度或值可以是％。雖然以％表示值，但它適用于圖像可用的框。案例如下：
<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屬性用于設(shè)置圖像的不透明度。此屬性用于在Mozilla中創(chuàng)建透明圖像。IE使用filter：alpha（opacity = x）來(lái)創(chuàng)建透明圖像。
在Mozilla中（-moz-opacity：x）x可以是0.0到1.0之間的值。較低的值使元素更透明（CSS3有效語(yǔ)法不透明度相同：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>效果如下：
看完了這篇文章，相信你對(duì)使用CSS設(shè)置圖像效果的方法有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼