側邊欄中的圖像？

有沒有辦法只使用CSS將圖像放到側邊欄上？愚蠢的問題，我敢肯定，但我正在試圖在我爲這堂課建設的這個小網站上的每個側邊欄上獲得一些圖片。我有他們在我的HTML包裹在一個div，但是當我嘗試目標他們給填充，邊距，邊界半徑任何......似乎沒有任何工作。這裏是CSS和HTML。任何幫助將是偉大的！側邊欄中的圖像？

（目前只考慮我真的不知道該如何對付它們的CSS的一小部分）

<h2>Where to?</h2> 

<div id="mainnav"> 

    <ul> 
<li><a href="index.html">Home</a></li> 
<li><a href="events.html">Events</a></li> 
<li><a href="about.html">About</a></li> 
<li><a href="contact.html">Contact</a></li> 
    </ul> 

</div> 

<div id="one"> 
<img src="surprisedgirl.jpg" height="200" width="250"> 
</div> 

    </aside> 

<aside class="sidebar2"> 

    <div id="img1"> 
    <img src="goggle_kids_small.jpg" height="150" width="200"> 
    </div> 

    <div id="img2"> 
    <img src="waterparkkids.jpg" height="150" width="250"> 
    </div> 

    <div id="img3"> 
    <img src="slide-01.jpg" height="150" width="200"> 
    </div> 

    <div id="img4"> 
    <img src="park.jpg" height="300" width="270"> 
    </div> 


    </aside> 

#one{border-radius: 50%; 

}

我需要爲目標的DIV？還是班級？

小提琴link

來源

2015-12-05 Sylvia585

如果我讀了你的解釋正確的有放置使用背景圖片..如果我是正確使用CSS圖像的方式這樣說，那我就告訴你如何。 – Uniforlyff

但是我已經有一個背景圖像...我試圖放置更多的圖像。我已經設法用HTML做到了，但我完全不能設計它們。 – Sylvia585

首先，你會希望把樣式標記在文檔的頭部是不知道你是否知道，因爲你有#one {邊界半徑：你的代碼在這樣把這個文檔的頭部或在一個帶有指向樣式表的鏈接的樣式表上，但是將目標元素定位到div和div內的圖像。因此，它看起來像這樣在你的文檔

<style> 
#one img { 
    border-radius: 10px; 
    padding:10px; 
    margin:10px; 
    width: 250px; 
    height: 200px; 
} 
#img1 img{ 
    border-radius: 10px; 
    padding:10px; 
    margin:10px; 
    width: 250px; 
    height: 200px; 
} 
#img2 img{ 
    border-radius: 10px; 
    padding:10px; 
    margin:10px; 
    width: 250px; 
    height: 200px; 
} 
#img3 img{ 
    border-radius: 10px; 
    padding:10px; 
    margin:10px; 
    width: 250px; 
    height: 200px; 
} 
#img4 img{ 
    border-radius: 10px; 
    padding:10px; 
    margin:10px; 
    width: 250px; 
    height: 200px; 
} 
</style>

的頭，你可以看到，我們的目標圖像是在div然後IMG本身。這是你想知道的嗎？還是我讀錯了？

來源

2015-12-05 05:13:43

這似乎適用於填充，但是border-radius不起作用。 – Sylvia585

它應該正常工作，因爲你沒有看到邊框半徑爲10像素的邊框半徑是因爲10像素的填充，如果你添加20px的邊框半徑你會看到它，或者如果你刪除填充和使用邊距的間距你會看到邊界半徑。我在這裏設置了一個小提示，向您展示https://jsfiddle.net/wamosjk/7fuj1wmL/，您還可以從內聯img css中刪除高度和寬度，並在您的css中聲明它。 –

您可以在單格的所有圖像，並使用一個類來給他們的風格或代替每個圖像給出不同的類別把它們放在同一個類。像

HTML

<aside class="sidebar2"> 
<div id="img1"> 
     <img src="goggle_kids_small.jpg" > 
     <img src="waterparkkids.jpg"> 
     <img src="slide-01.jpg"> 
     <img src="park.jpg"> 
    </div> 
</aside>

CSS

.sidebar2{ 
text-align: center; 
background-image: url(Water-Drop-background.jpg); 
float: right; 
padding: 0 10px 0 20px; 
} 

.sidebar img1{ 
    height: 800px; 
    width: 20%; 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
}

或任何你想給。

來源

2015-12-05 05:13:24 Dasrath

側邊欄中的圖像？

回答

相關問題