Question

我的客户端需要与WooTheme's Duo Theme相同的图像样式效果。我可以很容易地实现这个初始效果：

------HTML-------------
<div class="home-banner">

</div>

-------CSS-------------
.home-banner {
height: 500px;
background-image: url("CLIENT'S BG IMG");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
padding: 9.505em 1.618em 11.089em;
text-align: center;
box-sizing: border-box;
position: relative;
overflow: hidden;
}

.home-banner:after {
content: "";
display: block;
height: 10em;
width: 200%;
position: absolute;
bottom: -5em;
right: -20em;
background: none repeat scroll 0% 0% #46535D;
border-radius: 100%;
transform: rotate(2deg);
border-top: 0.327em solid #F97960;
}

但有一个要求是杀死整个事情。客户的照片显示了他们公司的员工。调整浏览器窗口大小以模拟平板电脑/智能手机时，由于css规则，无法看到大部分图像：

background-size: cover;

如果我更改此规则，横幅效果将无法正常工作。我需要在一个小显示器上看到所有工作人员。想象一下，一名工作人员的头被他们的移动设备切断了。这意味着我的头脑将是下一个。有什么建议吗？

Answer 1

您可以使用CSS媒体查询，例如

@media (max-width: 480px){  
/*Place mobile CSS here*/
}

这样，只要用户在移动设备上查看此内容，此CSS规则就会覆盖普通浏览器...只需将其置于普通浏览器样式之后。

图像造型效果

1 个答案: