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

代码:

  • 常见问题:背景填充时候图片大小不一致、重复等等问题,建议在插入图片的时候最好不用img标签直接在div中添加背景图片,有利于对背景图片的更改。

  1. 插入图片:
    background-image: url(../img/product-auto/benz-amg-s63-01.jpg)
  2. 图片平铺中去重操作:
    background-repeat: no-repeat;
  3. 将图片缩放到正好完全覆盖定义背景的区域。
    background-size: cover;
  4. 图片居中
    background-position: center;
  • css动态效果:当鼠标移动到图片时出现背景颜色把文字覆盖效果

实现鼠标移动出现如上效果步骤:

  1. 设置 transition 属性,all表示的是该transition所在的style中所设置的所有属性都有过渡效果,.5s表示显示的时长,否则时长为 0,就不会产生过渡效果。 
    transition: all .5s ease;
  2. 鼠标移动事件效果,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>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值