html - 裁剪图像设置为背景而不拉伸(stretch)

Question

裁剪图片并设置为不拉伸(stretch)的背景，背景图片应为 50% 的封面图片和 50% 的灰色背景

HTML:

<div class="main">
<div class="inner-wrapper">
  //contain here

</div>
</div>

CSS:

这个 .main 类是后台 css 属性

    .main
    {
        width:1024px;
        margin:0 auto;
        background:url(event_cover_img.jpg);
        background-size:100%;
        background-repeat:no-repeat;
        background-color:#eceeef;
        padding-bottom:50px;
        box-shadow: 2px 2px 2px #969494;
    }
    .inner-wrapper
    {
        padding-top:150px;
        float:left;
    }

This图片有误。

This图片是正确的。

但是图像是浆糊的，所以我需要解决它是如何解决的？

Answer 1

你可以试试把图片放在一个伪类中

.main::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 50%;
    top: 0;
    left: 0;
    background:url(event_cover_img.jpg);
    background-size: cover;
}