Question

我已经在jsfiddle上尝试了这项工作，我在网络服务器附近的任何地方都可以使用它并且无法正常工作，在我的三个网站上进行了尝试。有任何想法吗？ *我只使用美国国家航空航天局的照片来解决这个问题。是否有我不知道的许可方面？请问什么？！？！

我看过很多问题，但没有什么能让我到处找。

.information {
    position: relative;
    display: inline-block;
    vertical-align: top; 
    top: 0;
    width: 45%;
    margin-left: 20px;
    background: #fff;
    height: 160px;
    background-image:url("http://www.nasa.gov/sites/default/files/images/743348main_Timelapse_Sun_4k.jpg");
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:left top;
}

Answer 1

从样式中删除background-attachment:fixed;。

background-attachment: fixed表示关于视口的背景是固定的。即使元素具有滚动机制，“固定”背景也不随元素移动。

这是一个向您展示问题的演示。当图像在页面中较低时，您无法看到它们。向下滚动时，您可以看到图像：

<强> Demo

<强> HTML

Lorem ipsum dolor坐下来，精神恍惚。 Voluptatum deleniti dolor debitis iste eligendi reprehenderit voluptate dignissimos velit tempora quidem molestias tenetur accusantium ea repellendus atque neque minima quos sed！

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum deleniti dolor debitis iste eligendi reprehenderit voluptate dignissimos velit tempora quidem molestias tenetur accusantium ea repellendus atque neque minima quos sed!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum deleniti dolor debitis iste eligendi reprehenderit voluptate dignissimos velit tempora quidem molestias tenetur accusantium ea repellendus atque neque minima quos sed!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum deleniti dolor debitis iste eligendi reprehenderit voluptate dignissimos velit tempora quidem molestias tenetur accusantium ea repellendus atque neque minima quos sed!</p>
<div class="information"></div>
<div class="information"></div>
<div class="information"></div>
<div class="information"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum deleniti dolor debitis iste eligendi reprehenderit voluptate dignissimos velit tempora quidem molestias tenetur accusantium ea repellendus atque neque minima quos sed!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum deleniti dolor debitis iste eligendi reprehenderit voluptate dignissimos velit tempora quidem molestias tenetur accusantium ea repellendus atque neque minima quos sed!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum deleniti dolor debitis iste eligendi reprehenderit voluptate dignissimos velit tempora quidem molestias tenetur accusantium ea repellendus atque neque minima quos sed!</p>

<强> CSS

.information {
    position: relative;
    display: inline-block;
    vertical-align: top; 
    top: 0;
    width: 45%;
    margin-left: 20px;
    background: #fff;
    height: 160px;
    background-color: #eeeeee;
    background-image:url("http://lorempixel.com/400/200/");
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:left top;
    margin: 10px;
}

Answer 2

我在jsfiddle中访问此图像没有问题，所以我怀疑问题与权限有关。

我认为问题在于您的图像对于所提供的div区域而言太大，并且只是在图像的左上方显示黑色。

尝试将background-size: cover;和background-position: center center;添加到.information。

请看这个小提琴：

http://jsfiddle.net/LjPfH/

Answer 3

链接不应该在CSS中使用单引号而不是双引号吗？

不是

背景图像：URL（ “http://www.nasa.gov/sites/default/files/images/743348main_Timelapse_Sun_4k.jpg”）;

TRY

 background-image:url('http://www.nasa.gov/sites/default/files/images/743348main_Timelapse_Sun_4k.jpg');

Updated Fiddle Here

W3 Schools info on background image

CSS背景图像不可见

3 个答案: