图像样式效果

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;
}

但是有一个要求就是把整个东西都干掉。客户的照片是他们公司的员工。当浏览器 window 调整大小以模拟 tablet/smartphone 时，由于 css 规则无法看到大部分图像：

background-size: cover;

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

Answer 1

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

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

这样，每当用户在移动设备上查看此内容时，此 CSS 规则将覆盖普通浏览器规则...只需将其放在普通浏览器样式之后即可。

图像样式效果

Image Styling Effect

html

css

mobile