侧边栏中的图像？

有没有办法只使用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

侧边栏中的图像？

回答

相关问题