CSS背景图像教学与实例
导读：背景图像 background-image属性描述了元素的背景图像. 默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体. 页面背景图片设置实例: 实例 body{background-image:url...
背景图像
background-image属性描述了元素的背景图像.
默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.
页面背景图片设置实例:
实例
body{
background-image:url('paper.gif');
}
下面是一个例子是一个糟糕的文字和背景图像组合。文本可读性差:
实例
body{
background-image:url('bgdesert.jpg');
}
背景图像-水平或垂直平铺
默认情况下background-image属性会在页面的水平或者垂直方向平铺。
一些图像如果在水平方向与垂直方向平铺，这样看起来很不协调，如下所示:
实例
body
{
background-image:url('gradient2.png');
}
如果图像只在水平方向平铺(repeat-x),页面背景会更好些:
实例
body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
背景图像-设置定位与不平铺
Remark让背景图像不影响文本的排版
如果你不想让图像平铺，你可以使用background-repeat属性:
实例
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}
以上实例中，背景图像与文本显示在同一个位置，为了让页面排版更加合理，不影响文本的阅读，我们可以改变图像的位置。
可以利用background-position属性改变图像在背景中的位置:
实例
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:righttop;
}
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： CSS背景图像教学与实例
本文地址： https://pptw.com/jishu/664096.html