css and image 总结

最新推荐文章于 2025-01-10 19:56:17 发布

weixin_34302561

最新推荐文章于 2025-01-10 19:56:17 发布

阅读量73

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yikeshu/archive/2012/02/23/2365146.html

本文介绍了使用CSS为页面元素设置背景图片的方法，包括如何给图片添加边框、去除链接时的边框、定位背景图片等，并展示了创建复杂边框效果的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1：How do I add borders to images? 怎样给图片增加边框

img {

border: 1px solid #000000;
}

2：How do I use CSS to remove the blue border around my navigation images? 去掉图片链接时的蓝色边框

img {

border: none;
}

3：How do I set a background image for my page using CSS?

body {
font: 0.9em Verdana, Geneva, Arial, Helvetica, sans-serif;
background-color: red;
color: #000000;
background-image: url(background-norepeat.jpg);
background-repeat: no-repeat;

}

body {
font: 0.9em Verdana, Geneva, Arial, Helvetica, sans-serif;
background-color: #D2D7E4;
color: #000000;
background-image: url(background-repeatx.jpg);
background-repeat: repeat-x;
background-attachment: fixed;指定背景图像是固定的还是随其他页面内容滚动
}

如果图像不够高或者宽我们可以用相视的颜色设背景颜色

4：How do I position my background image?

#content {
margin: 2em 4em 2em 4em;
background-color: #FFFFFF;
padding: 1em 1em 40px 1em;
background-image: url(tick.gif);
background-repeat: no-repeat;
background-position: bottom right;
}

background-position: top;等于background-position: top center;

background-position: 30%;等于background-position: 30% 50%;

background-position: 20px 20px;

5：Can I set a background image on any element? 在任何元素上设置背景图片

#smallbox {

background-image: url(boxbg.gif);

background-repeat: repeat-x;}

6：How do I place text on top of an image?

#smallbox h2 {
margin: 0;
padding: 0.2em;
background-image: url(boxheaderbg.jpg);
background-repeat: no-repeat;
color: #FFFFFF;
background-color: red;
font-size: 140%;
font-weight: normal;
}

Can I create more complex image borders, such as a double border?

img.doubleborder {

border: 1px solid #333;

padding: 5px;

background-color: #EEEEEE;
}