不能添加背景图片的CSS

我跟着这个教程：不能添加背景图片的CSS

https://www.youtube.com/watch?v=on7p8oqfv80

我似乎无法添加背景图像的类。这个图像链接确实有效，我已经在浏览器中打开了，我以前也使用“img src =”将它直接添加到html中。有用。

我知道样式表正在正确链接，因为文本的样式发生了变化。

我已经尝试使用单引号而不是双引号添加宽度，尝试使用背景图像而不是背景。我曾尝试使用本地映像，是的，我在Linux上，是的，我确信在该目录中的所有文件上都有chmod 777。我已经尝试了所有在这些以下链接提供了不同的解决方案：

Cannot add background image to my <div>

How to add background image in css?

Cannot add background image to my <div>

跨Linux，Windows和Mac尝试这种在Firefox，Chrome和IE。

下面是代码

var errorCallback = function(e) { 
 
    console.log('Reeeeejected!', e); 
 
}; 
 

 
navigator.getUserMedia = navigator.getUserMedia || 
 
    navigator.webkitGetUserMedia || 
 
    navigator.mozGetUserMedia || 
 
    navigator.msGetUserMedia; 
 

 
var video = document.querySelector('video'); 
 

 
if (navigator.getUserMedia) { 
 
    navigator.getUserMedia(
 

 
    { 
 
     audio: true, 
 
     video: true 
 
    }, 
 

 
    function(stream) 
 

 
    { 
 
     video.src = window.URL.createObjectURL(stream) 
 
    }, 
 

 
    errorCallback); 
 
} else { 
 
    video.src = 'somevideo.webm'; 
 
}

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
} 
 

 
h1 { 
 
    text-align: center; 
 
    font-size: 575%; 
 
    color: #4A4444; 
 
    text-transform: uppercase; 
 
    letter-spacing: 1%; 
 
    margin: 45% 0; 
 
} 
 

 
h2 { 
 
    text-align: center; 
 
    font-size: 275%; 
 
    color: #E5E5E5; 
 
    text-transform: uppercase; 
 
    letter-spacing: 1 
 
} 
 

 

 
} 
 

 
/*---Start Parallex---*/ 
 
.parallax { 
 
    float: left; 
 
    border: 5px groove; 
 
    margin-left: 70px; 
 
    width: 100px; 
 
    height: 100px; 
 
    background-image: url('http://www.w3newbie.com/wp-content/uploads/parallax-2.jpg') repeat fixed 100%; 
 
    */ background-size: 100% 100%; 
 
    width: auto; 
 
} 
 
.parallax-inner { 
 
    padding-top: 50%; 
 
    padding-bottom: 50%; 
 
}

<h1> Space </h1> 
 
<section class="parallex"> 
 
    <div class="parallex-inner"> 
 
    <h2>Space</h2> 
 
    </div> 
 
</section> 
 
<h1>Space</h1>

来源

2017-05-07 MedicineMan25

这是一个错字的问题，如在样式表你正在设计parallax但是当你添加类的section你加入parallex纠正你的样式表它会工作：

*{ 

    margin: 0; 
    padding: 0; 
    border: 0; 

} 

h1 { 

    text-align: center; 
    font-size: 575%; 
    color: #4A4444; 
    text-transform: uppercase; 
    letter-spacing: 1%; 
    margin: 45% 0; 
} 

h2 { 

    text-align: center; 
    font-size: 275%; 
    color: #E5E5E5; 
    text-transform: uppercase; 
    letter-spacing: 1 
} 

.parallex { 
    float: left; 
    border: 5px groove; 
    margin-left: 70px; 
    width: 100px; 
    height: 100px; 
    background-image: url('http://www.w3newbie.com/wp-content/uploads/parallax-2.jpg') repeat fixed 100%; 
    background-size: 100% 100%; 
    width: auto; 
} 


.parallex-inner { 
    padding-top: 50%; 
    padding-bottom: 50%; 

}

来源

2017-05-07 11:49:27

* facepalm * omg wtf ... wtf wtf ... *挂在耻辱的头* ...这么多哥们... – MedicineMan25

欢迎您:) –

*{ 
 

 
margin: 0; 
 
padding: 0; 
 
border: 0; 
 

 
} 
 

 
h1 { 
 

 
text-align: center; 
 
font-size: 575%; 
 
color: #4A4444; 
 
text-transform: uppercase; 
 
letter-spacing: 1%; 
 
margin: 45% 0; 
 

 
} 
 

 
h2 { 
 

 
    text-align: center; 
 
    font-size: 275%; 
 
    color: #E5E5E5; 
 
    text-transform: uppercase; 
 
    letter-spacing: 1 
 
    } 
 

 

 

 
/*---Start Parallex---*/ 
 

 
.parallex{ 
 

 
float: left; 
 
border: 5px groove; 
 
margin-left: 70px; 
 
width: 100px; 
 
height: 100px; 
 

 
background: url('http://www.w3newbie.com/wp-content/uploads/parallax-2.jpg') repeat fixed 100%; 
 
background-size: 100% 100%; 
 
width: 100%; 
 

 
} 
 

 

 
.parallax-inner{ 
 
    padding-top: 50%; 
 
    padding-bottom: 50%; 
 

 
}

<body> 
 

 
     <h1> Space </h1> 
 

 

 
    <section class="parallex"> 
 

 
     <div class="parallex-inner"> 
 

 
      <h2>Space</h2> 
 

 
     </div> 
 

 
    </section> 
 

 

 
     <h1>Space</h1> 
 

 
</body>

我喜欢一些拼写错误和语法错误。

希望这会帮助你升迁！

来源

2017-05-07 11:52:34

谢谢你。是的，这确实是一个愚蠢的类型。此外，我正在从本地机器而不是本地主机进行调试，所以我所做的更改没有任何效果。我认为缓存可能是我的倒台。 – MedicineMan25

我使用本地的图像文件想你的代码，发现背景图像显示，但是当它被直接传递（无论是部分或DIV）

<section style="background-image: url('049.JPG');" class="parallex"> 

    <div class="parallex-inner"> 

     <h2>Space</h2> 

    </div> 

</section>

我要的是使用正确的类添加正如已经建议的那样，并且在你的背景图像声明返回给我没有正面结果之后删除* /（肯定是一个bug）...除了当我直接尝试时

来源

2017-05-07 11:56:41

你也为我工作，这就是为什么我发现它很奇怪。这是一个错字。感谢您的输入:) – MedicineMan25

不能添加背景图片的CSS

回答

相关问题