bootstrap前端开发，CSS内联样式的使用

最新推荐文章于 2023-05-25 22:26:21 发布

莫晓前端资料

最新推荐文章于 2023-05-25 22:26:21 发布

阅读量283

点赞数

分类专栏：程序员文章标签：面试前端大前端

本文链接：https://blog.csdn.net/m0_60226911/article/details/118994245

版权

本文详细介绍了CSS内联样式在Bootstrap前端开发中的应用，包括背景颜色、图片、重复、定位、附着、综合写法的使用方法，并探讨了CSS3新增的背景属性，如半透明、背景缩放和多背景图。通过实例和技巧，帮助开发者更好地掌握背景样式的设置。

摘要由CSDN通过智能技术生成

一、背景颜色 background-color

属性名：background-color
作用：在盒子区域添加背景颜色的修饰
加载区域：在 border 及以内加载背景颜色
属性值：颜色名、颜色值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 200px;
            height: 200px;
            padding: 30px;
            border: 5px dashed red;
            margin: 20px;
            background-color: slateblue;
        }
    </style>
</head>
<body>
    <div class="box"> 背景颜色 </div>  
</body>
</html>

二、背景图片 background-image

属性名：background-image
作用：给盒子添加图片的背景修饰
加载范围：默认的加载到边框及以内部分。后期如果图片不重复加载，加载从 border 以内开始
属性值：url(图片路径)
url：uniform resource locator，统一资源定位符，小括号内部书写查找图片的路径

.box {
            width: 200px;
            height: 200px;
            padding: 30px;
            border: 5px dashed red;
            margin: 20px;
            /* background-color: slateblue;  背景颜色 */
            background-image: url(images/lagouwang.jpg);
        }

如果图片不重复，从 border 以内开始加载
背景图和背景颜色可以同时设置，背景图会压盖背景颜色，没有背景图的区域会显示背景颜色

三、背景重复 background-repeat

属性名：background-repeat
作用：设置添加的背景图是否要在盒子中重复进行加载
根据属性值不同，有四种重复加载方式

.box {
            width: 200px;
            height: 200px;
            padding: 30px;
            border: 5px dashed red;

最低0.47元/天解锁文章

莫晓前端资料

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap前端开发，CSS内联样式的使用

**一、**背景颜色 background-color属性名：background-color作用：在盒子区域添加背景颜色的修饰加载区域：在 border 及以内加载背景颜色属性值：颜色名、颜色值<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, in
复制链接

扫一扫