不能添加背景圖片的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

回答

相關問題