如何用css设计出商品购物图片

最新推荐文章于 2024-08-09 16:30:00 发布

成长的小牛233

最新推荐文章于 2024-08-09 16:30:00 发布

阅读量858

点赞数 2

分类专栏： web

本文链接：https://blog.csdn.net/dreamzuora/article/details/79149213

版权

web 专栏收录该内容

58 篇文章 1 订阅

订阅专栏

代码：

常见问题：背景填充时候图片大小不一致、重复等等问题，建议在插入图片的时候最好不用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>