Rumah > Artikel > hujung hadapan web > 如何利用设置图像效果？（代码实例）

如何利用设置图像效果？（代码实例）

云罗郡主asal: 2018-11-09 15:59:381654semak imbas

本篇文章给大家带来的内容是关于如何利用设置图像效果，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

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

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>

显示效果如下：

微信截图_20181109154757.png

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>

微信截图_20181109155201.png

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" />
   </body>
</html>

效果如下：

微信截图_20181109155424.png

以上就是对如何利用设置图像效果的全部介绍，如果您想了解更多有关CSS3视频教程，请关注PHP中文网。

Atas ialah kandungan terperinci 如何利用设置图像效果？（代码实例）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：css的属性选择器是什么？属性选择器的使用Artikel seterusnya：利用CSS的float属性实现二级响应式页面

Artikel berkaitan

Lihat lagi