0

我有一张图片，见下图：

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 的情况下做到这一点？

4

2 回答 2

1

您可以尝试使用：

background-size: cover;

在 MDN阅读更多关于财产的信息。background-size

您也可以通过将图像设置为 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%;
}
于 2013-11-04T22:01:21.257 回答
1

你有没有考虑过一个 CSS 掩码和一些宽度和最大宽度与百分比

就像是：

-webkit-mask-image: url(image.jpg);

于 2013-11-04T22:24:35.690 回答