代码:
- 常见问题:背景填充时候图片大小不一致、重复等等问题,建议在插入图片的时候最好不用img标签直接在div中添加背景图片,有利于对背景图片的更改。
- 插入图片:
background-image: url(../img/product-auto/benz-amg-s63-01.jpg)
- 图片平铺中去重操作:
background-repeat: no-repeat;
- 将图片缩放到正好完全覆盖定义背景的区域。
background-size: cover;
- 图片居中
background-position: center;
- css动态效果:当鼠标移动到图片时出现背景颜色把文字覆盖效果
实现鼠标移动出现如上效果步骤:
- 设置 transition 属性,all表示的是该transition所在的style中所设置的所有属性都有过渡效果,.5s表示显示的时长,否则时长为 0,就不会产生过渡效果。
transition: all .5s ease;
- 鼠标移动事件效果,transform属性允许我们对元素进行旋转、缩放、移动或倾斜。rotate旋转 、translateY向上移动。
.container:hover .img { transform: rotate(-2deg) }
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0px;
padding: 0px;
}
.container {
display: inline-block;
margin: 10px 0px 0px 10px;
height: 300px;
width: 200px;
border-radius: 20px 20px 0px 0px;
overflow: hidden;
box-shadow: 0px 0px 10px black;
position: relative;
}
.container:hover .img {
transform: rotate(-2deg)
}
.container:hover .buy {
transform: translateY(-100px)
}
.img {
height: 200px;
width: 200px;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
transition: all .5s ease;
}
.content {
height: 100px;
width: 200px;
font-family: "微软雅黑";
text-indent: 10px;
}
.title {
font-size: 24px;
color: #212121;
}
.detail {
margin-top: 6px;
color: #616161;
}
.price {
margin: 6px 10px 0px 0px;
text-align: right;
color: #F57C00;
}
.buy {
height: 100px;
width: 200px;
background-color: lightblue;
opacity: .7;
position: absolute;
top: 300px;
transition: all .5s ease;
}
.border {
border: 1px solid red;
}
</style>
</head>
<body>
<div class="container ">
<div class="img" style="background-image: url(../img/product-auto/benz-amg-s63-01.jpg);"></div>
<div class="content ">
<div class="title">
Benz
</div>
<div class="detail">
Bean 0-100km 4.4s
</div>
<div class="price">
$60,000
</div>
</div>
<div class="buy">
</div>
</div>
<div class="container ">
<div class="img" style="background-image: url(../img/product-auto/benz-amg-s63-01.jpg);"></div>
<div class="content ">
<div class="title">
Benz
</div>
<div class="detail">
Bean 0-100km 4.4s
</div>
<div class="price">
$60,000
</div>
</div>
<div class="buy">
</div>
</div>
</body>
</html>