Question

我一直想知道如何在css中实现这种类型的背景已经有一段时间了。这是一个图像背景，但图像似乎并不存在。你无法下载图像，无法拖动它。请参阅粉红色时尚图像背景 here。我怎样才能做到这一点？或者有人可以帮助我使用功能名称？或者也许是一个很好的链接，我可以在那里学习或看到这个例子？我只是尝试谷歌搜索，但不知道它的电话。另一个例子是中国新年背景Here。

Answer 1

它是background-image：
新年：

.homepage-background-cny {
    background: url("../../img/cny.jpg") no-repeat scroll right top transparent;
}

Etsy的：

#seasonal-hero {
    background: url("//img0.etsystatic.com/site-assets/homepage-carousel/valentine-gift-hero-v3.jpg") repeat scroll center center #FEEEEF;
    width: 100%;
    height: 400px;
    min-width: 1030px;
    cursor: pointer;
    position: relative;
}

通常无法拖动背景图像，可以使用检查器找到元素背景的来源： enter image description here

JSFiddle Demo

div{
    height:300px;
    background: url('http://lorempizza.com/1000/500');
}

<div>Background-Image</div>

Answer 2

他们只是CSS背景图片：

Demo

HTML

<div id="container">
    This is the content.
</div>

CSS

#container {
    padding: 10px;
    min-height: 600px;
    width: 100%;
    background: url(//img0.etsystatic.com/site-assets/homepage-carousel/valentine-gift-hero-v3.jpg) repeat-x;
}

Answer 3

在CSS中，您使用背景图像规则：

background-image：url（＆＃34; // img0.etsystatic.com/site-assets/homepage-carousel/valentine-gift-hero-v3.jpg"）;

这是您链接使用的页面上的内容。

最佳，迈克尔

CSS中的无图像背景图像

3 个答案: