小编给大家分享一下使用CSS设置背景颜色和图像的方法是什么,希望大家阅读完这篇文章后大所收获,下面让我们一起去探讨吧!
使用CSS设置背景我们需要用到background背景属性,通过background属性我们可以设置背景颜色和背景图像。
我们先来看看CSS设置背景颜色
我们需要使用background-color来改变背景颜色
background-color:value(颜色编码或者颜色名称)
在值的部分,你可以输入诸如#000000的颜色代码或诸如white的颜色名称,设置的颜色就为背景颜色。
background-color的初始值是transparent,在这种情况下,将应用父元素的背景颜色。如果父元素中没有设置,它将变为白色。
CSS设置图像背景
通过使用background-image属性,我们可以预先设置上传到服务器的图像作为背景。
background-image: url("图像的路径");
在url中,输入要用作背景的图像文件的路径。如果css文件和图像文件位于同一目录中,则只有文件名就可以了。
绝对路径和相对路径都可以用作图像文件的路径。
要输入相对路径,请输入外部样式表的相对路径,而不是html文件的相对路径。
接着我们来看具体的示例
使用background-color设置背景颜色
代码如下
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> body{ background-color: skyblue; } </style> </head> <body> <p>背景颜色设置</p> </body> </html>
运行结果
在浏览器上显示如下效果,指定的颜色skyblue被设置为背景颜色
使用background-image设置背景图像
代码如下
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> body{ background-image: url("img/t.jpg"); } </style> </head> <body> <p>背景图像设置</p> </body> </html>
运行效果下图所示
当屏幕尺寸大于背景图像时,默认情况下会自动重复显示背景图像。可以使用background-repeat属性更改此设置。
背景图像显示开始位置位于初始设置的左上角。可以使用background-position属性更改此设置
看完了这篇文章,相信你对使用CSS设置背景颜色和图像的方法是什么有了一定的了解,想了解更多相关知识,欢迎关注亿速云行业资讯频道,感谢各位的阅读!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。