图片是网页中非常重要的媒体类型,恰到好处的使用图片可以使网页多彩生动,不再局限冷冰冰的文字。
img 元素默认为行内元素,并且默认有 5px
边距。通过设置块级元素,可使一行只显示一张图片。通过设置行内元素,可使一行显示多张图片。会计元素布局位置时使用 margin 属性,行内元素布局位置时使用 text-align 属性。
示例:
<img src="zhaojian1.jpg" alt="" >
<img src="zhaojian1.jpg" alt="" >
<img src="zhaojian1.jpg" alt="" >
<img style="display: block;" src="zhaojian1.jpg" alt="" >
<img style="display: block;" src="zhaojian1.jpg" alt="" >
<img style="display: block;margin: 0 auto;" src="zhaojian1.jpg" alt="" >
效果:
在 CSS 中,你可以使用 opacity
属性来设置元素(包括图片)的透明度。这个属性接受一个值,范围从 0(完全透明)到 1(完全不透明)。
如果你只想让图片的背景透明而不影响内容,你可以使用 RGBA 颜色值。
示例:
<img src="zhaojian1.jpg" alt="" >
<img style="opacity: 0.5;" src="zhaojian1.jpg" alt="" >
效果:
在 CSS 中,你可以使用 border-radius
属性为图片添加圆角。这个属性用于设置元素的边框角的弯曲程度。
示例:
<img style="border-radius: 10px;" src="zhaojian1.jpg" alt="" >
<!-- 设置圆角的半径,可以根据需要调整 -->
<img style="border-radius: 20px 10px;" src="zhaojian1.jpg" alt="" >
<!-- 水平半径为20px,垂直半径为10px -->
<img style="border-radius: 10px 20px 15px 5px;" src="zhaojian1.jpg" alt="" >
<!-- 左上10px,右上20px,右下15px,左下5px -->
效果:
在 CSS 中,你可以使用 box-shadow
属性为图片添加阴影效果。这个属性允许你添加投影效果,包括阴影的颜色、模糊半径、偏移量等。
示例:
<img style="box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);" src="zhaojian1.jpg" alt="" >
<br><br>
<!-- 水平偏移5px,垂直偏移5px,模糊半径10px,阴影颜色为半透明的黑色 -->
<img style="box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 10px rgba(255, 255, 255, 0.7) inset;" src="zhaojian1.jpg" alt="" >
<!-- 外阴影和内阴影效,使用 inset 关键字来指定内阴影-->
效果:
在 CSS 中,背景是网页设计中常用的样式之一,用于设置元素的背景样式。
通过 background-color
属性设置元素的背景颜色。
示例:
.example1 {
background-color: #f0f0f0;
width: 500px;
height: 500px;
}
<div class="example1"></div>
效果:
通过 background-image
属性设置元素的背景图片。可以使用图片的相对路径、绝对路径或者 URL。
示例:
.example1 {
background-image: url('zhaojian.jpg');
width: 500px;
height: 500px;
}
<div class="example1"></div>
效果:
通过 background-repeat
属性设置背景图片的重复方式,可以是水平方向、垂直方向、同时在两个方向上或者不重复。
示例:
.base {
background-image: url('zhaojian1.jpg');
width: 200px;
height: 200px;
}
.example1 {
background-repeat: no-repeat;
}
.example2 {
background-repeat: repeat-x;
}
.example3 {
background-repeat: repeat-y;
}
不重复
<div class="base example1"></div>
水平方向重复
<div class="base example2"></div>
垂直方向重复
<div class="base example3"></div>
效果:
通过 background-size
属性设置背景图片的尺寸,可以是具体的像素值、百分比,也可以使用关键字如 cover
或 contain
。
示例:
.base {
width: 200px;
height: 200px;
}
.example1 {
background-image: url('zhaojian.jpg');
background-size: auto;
}
.example2 {
background-image: url('zhaojian2.jpg');
background-size: cover;
}
.example3 {
background-image: url('zhaojian2.jpg');
background-size: contain;
}
.example4 {
background-image: url('zhaojian2.jpg');
background-size: 50% 100%;
}
<div class="base example1"></div>
<br>
<div class="base example2"></div>
<br>
<div class="base example3"></div>
<br>
<div class="base example4"></div>
效果:
通过 background-position
属性设置背景图片的起始位置,可以使用像素值、百分比,也可以使用关键字。
示例:
.base {
background-image: url('zhaojian1.jpg');
background-repeat: no-repeat;
background-color: #d6d7d8;
width: 200px;
height: 200px;
}
.example1 {
background-position: center top;
}
.example2 {
background-position: 50% 50%;
}
.example3 {
background-position: 50% bottom;
}
<div class="base example1"></div>
<br>
<div class="base example2"></div>
<br>
<div class="base example3"></div>
效果:
通过 background-attachment
属性设置背景图片是否固定或者随着内容滚动。
示例:
.example1 {
background-attachment: scroll;
}
.example2 {
background-attachment: fixed;
}
.example3 {
background-attachment: local;
}
效果:
background属性可以实现简写,比单个子属性声明要简洁得多,可少写很多代码。而background子属性众多,到底如何安排子属性连写顺序也是一个难题。css2 推荐一条子属性连写顺序规则:
示例:
.example1{
background: color image repeat attachment position/size;
}
.example2{
background: #ffffff url('img_tree.png') no-repeat right top;
}