Question

我在css中执行以下操作：

background: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url('../img/back.jpg') no-repeat fixed center;

我想将图像拉伸到100％100％，我应该怎么做？

Answer 1

使用background-size: 100% 100%;。

可替换地：

background: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url('../img/back.jpg') no-repeat fixed center / 100% 100%;

Answer 2

试

    .k-pager-wrap {
        width:900px;
        position: relative;
        float:right;
        left:50%;
        margin-right: -450px;
        mix-blend-mode: normal !important;
    }
    .k-grid-pager {
        width:900px;
    }

Answer 3

From what I know, you cannot stretch an image in background with CSS. To start, you can use more accurate CCS:

body {
    background-image:  url('../img/back.jpg');
    background-repeat: no-repeat;
    background-color: rgba(0, 0, 0, 0.75);
}

But the picture will not stretch with this. An other possibility than CSS, is to use a cell of a table with a picture, in a div that is set to background:

<div class=background>
    <table width=100%><TR><TR>
        <img src="../img/back.jpg" width=100%></TR>
    </TR></TR></table>
</div>

And in CSS, you have to create layers with different z-index:

div.background {
    z-index:  -1;
    position: fixed;
    left:     0px;
    top:      0px;
    float:    top;}
div.notbackground {
    z-index:  0;
    position: absolute;
    left:     0px;}

the rest of your page should be placed in the "notbackground" div to appear in higher layer, so the picture is really on background. z-index=0 is higher than z-index=-1 (you ca use any numbers). This way your picture will appear as a background.

It's possible that some advanced CSS do the trick but after a quick search on Google I still don't know.

如何在css3中做一个较暗的背景图像并拉伸它？

3 个答案: