无涯教程网

关注我们

CSS - 图片(Images)

CSS - 图片(Images)

CSS在控制图像显示方面起着很好的作用。

border : 用于设置图像边框的宽度。
height : 用于设置图像的高度。
width : 用于设置图像的宽度。
-moz-opacity : 用于设置图像的透明度。

图像边框

图像的 border 属性用于设置图像边框的宽度。此属性的长度或百分比值都可以。零像素的宽度表示没有边框。

链接：https://www.learnfk.comhttps://www.learnfk.com/css/css-images.html

来源：LearnFk无涯教程网

<html>
   <head>
   </head>

   <body>
      <img style="border:0px;" src="/css/images/logo.png" />
      <br />
      <img style="border:3px dashed red;" src="/css/images/logo.png" />
   </body>
</html>

它将产生以下输出-

无涯教程网

图像高度

图像的 height 属性用于设置图像的高度。此属性的长度或百分比值都可以。在以％给出值时，它会将其应用于有图像的框。

<html>
   <head>
   </head>

   <body>
      <img style="border:1px solid red; height:100px;" src="/css/images/logo.png" />
      <br />
      <img style="border:1px solid red; height:50%;" src="/css/images/logo.png" />
   </body>
</html>

它将产生以下输出-

无涯教程网

图像宽度

图像的 width 属性用于设置图像的宽度。此属性的长度或百分比值都可以。在以％给出值时，它会将其应用于有图像的框。

<html>
   <head>
   </head>

   <body>
      <img style="border:1px solid red; width:150px;" src="/css/images/logo.png" />
      <br />
      <img style="border:1px solid red; width:100%;" src="/css/images/logo.png" />
   </body>
</html>

它将产生以下输出-

无涯教程网

-moz-opacity 属性

图像的 -moz-opacity 属性用于设置图像的透明度，此属性用于在Mozilla中创建透明图像。 IE使用 filter:alpha(opacity=x)创建透明图像。

在Mozilla(-moz-opacity:x)中，x可以是0.0-1.0的值。

在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="/css/images/logo.png" />
   </body>
</html>

它将产生以下输出-

无涯教程网

祝学习愉快！(内容编辑有误？请选中要编辑内容 -> 右键 -> 修改 -> 提交！)

技术教程推荐

即时消息技术剖析与实战 -〔袁武林〕

全栈工程师修炼指南 -〔熊燚（四火）〕

JavaScript核心原理解析 -〔周爱民〕

手机摄影 -〔@随你们去〕

物联网开发实战 -〔郭朝斌〕

性能优化高手课 -〔尉刚强〕

计算机基础实战课 -〔彭东〕

Vue 3 企业级项目实战课 -〔杨文坚〕

LangChain 实战课 -〔黄佳〕

好记忆不如烂笔头。留下您的足迹吧 :)