Question

我有一张图片，见下文：

http://bookyoursite.com/images/bysheaderpic.png

图像是一个页面横幅，页面标题从图片中间开始。

我目前所拥有的是

#banner {
    background-image:url('/images/bysheaderpic.png');
    background-repeat:no-repeat;
    background-position:right bottom;
    height:191px;
    max-width:1080px;
    min-width:550px;
    width:80%;
}

当窗口调整大小时，图像会从右侧刮掉，并切断标题的第一部分。如果我使用

background-position:center bottom;

它平等地切断了双方，导致.com被切断。

我需要的是缩小图像（调整窗口大小时），使页面标题保持可见。要做到这一点，背景需要“附着”在容器中间的2/3标记周围

我玩过background-attachment和background-position属性无济于事。有没有办法在不使用javascript的情况下执行此操作？

Answer 1

您可以尝试使用：

background-size: cover;

在MDN上阅读有关background-size财产的more。

您也可以将图片设为100％width和height，然后将其插入容器内。

HTML：

<div id="banner">
    <img src="http://bookyoursite.com/images/bysheaderpic.png" width="100%" height="100%">
</div>

CSS：

#banner {
    height:191px;
    max-width:1080px;
    min-width:550px;
    width:80%;
}

Answer 2

您是否考虑使用css掩码和一些宽度和最大宽度（百分比）

类似的东西：

-webkit-mask-image：url（image.jpg）;

如何根据窗口大小剃掉部分图像

2 个答案: