Question

我想构建一个非常小的响应式网站，其中包含我用css背景图像切换创建的图像悬停效果。

我的问题是，我尝试重新缩放它不起作用的图像。＆＃34;背景大小：包含＆＃34;在图像下创建一个大的白色块

CSS

#m2 {
    background-image: url('../p/test.jpg');
    height: 400px;
    margin-left: 16px;
    margin-right: 16px;
    background-size: contain;

}

#m2:hover {
   background-image: url('../p/overlay.png');
   margin-left: 16px;
   margin-right: 16px; 
}

HTML

<a href="s2.html"><div id="m2"></div></a>

这可以用纯CSS / HTML吗？

Answer 1

您是否尝试过：

background-size:cover;

拉伸图像以适合背景。

关于动态高度和宽度，您可能希望将填充设置为百分比。像填充：20％。

见这里：http://jsfiddle.net/Preben/8by1412u/

Answer 2

#m2 { 
  background-image: url('../p/test.jpg') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  margin-left: 16px;
  margin-right: 16px; 
}

#m2:hover {
  background-image: url('../p/overlay.png');
  margin-left: 16px;
  margin-right: 16px; 
}


<div id="m2"><a href="s2.html"><div id="m2"></a></div>

响应式重新缩放背景图像CSS

2 个答案: