CSS_背景

简介: 版权声明:本文为博主原创文章,转载请注明出处。 https://blog.
版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/twilight_karl/article/details/54709033

background-color 背景颜色

可以用padding指定颜色的边距

<html>
    <head>
        <style text/css">
            .s1{
                background-color:red;
            }
            .s2{
                background-color:blue;
                padding:20px;
            }
            .s3{
                background-color:yellow;
            }
        </style>
    </head>
    <body class="s3">
        <p class="s1">红色的段落</p>
        <p class="s2">蓝色的段落,20px的外边距</p>
    </body>
</html>

背景颜色

background-image 背景图片

background-image:url(路径)

<html>
    <head>
        <style type="text/css">
            .s1{
                background-image:url("素材/1.png");
            }
        </style>
    </head>
    <body class="s1">
    </body>
</html>

背景图片

background-repeat 重复

repeat 全部重复
repeat-x 沿着x重复
repeat-y 沿着y重复
no-repeat

沿着x重复

background-position 背景定位

top 上
bottom 下
left 左
right 右
center 中间
用数值表示位置:mpx npx(x,y)
用百分数表示

位置关键字可以按任何顺序出现,只要保证不超过两个关键字 - 一个对应水平方向,另一个对象垂直方向。如果只出现一个关键字,则认为另一个关键字是 center。

<!--表示图片位置在水平2/3,竖直1/3处-->
            .s1{
                background-image:url("素材/1.png");
                background-repeat:no-repeat;
                background-position: 66% 33%;
            }

图片位置

background-attachment 背景图像是否固定或者随着页面的其余部分滚动。

当background-attachment 的值为fixed时,随着页面的滚动图片的位置不会改变

相关文章
|
5月前
|
前端开发 UED 容器
CSS基础-背景属性:颜色、图片、重复
【6月更文挑战第9天】本文介绍了CSS背景属性,包括背景颜色、图片、重复的使用和常见问题。通过实例展示了如何设置背景颜色(如使用rgba()注意透明度影响)、背景图片(使用background-size控制缩放)、背景重复(避免默认平铺导致混乱)以及综合使用背景属性创建复杂效果。理解并熟练运用这些属性能提升网页设计的视觉层次和用户体验。建议通过实践不断探索和提升CSS技能。
67 4
|
6月前
|
前端开发 JavaScript
Vue中使用纯CSS实现全屏网格加渐变色背景布局
Vue中使用纯CSS实现全屏网格加渐变色背景布局
226 0
|
5月前
|
前端开发 容器
CSS3 新增背景属性 + 新增边框属性(如果想知道CSS3新增背景属性和新增边框属性的知识点,那么只看这一篇就够了!)
CSS3 新增背景属性 + 新增边框属性(如果想知道CSS3新增背景属性和新增边框属性的知识点,那么只看这一篇就够了!)
|
5月前
|
Web App开发 移动开发 前端开发
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
49 1
|
5月前
|
移动开发 前端开发 HTML5
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器一
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 一
78 1
|
6月前
|
前端开发
一文搞懂css常用字体属性与背景属性(2),非科班面试之旅
一文搞懂css常用字体属性与背景属性(2),非科班面试之旅
|
6月前
|
前端开发
CSS背景
【5月更文挑战第3天】CSS背景。
55 8
|
6月前
|
前端开发
css样式字体、文本、背景属性,盒子模型详解,轻松调教出优美的字体和网页背景色
css样式字体、文本、背景属性,盒子模型详解,轻松调教出优美的字体和网页背景色
|
6月前
|
前端开发 容器
CSS3属性详解(一)文本 盒模型中的 box-ssize 属性 处理兼容性问题:私有前缀 边框 背景属性 渐变 前端开发入门笔记(七)
CSS3属性详解(一)文本 盒模型中的 box-ssize 属性 处理兼容性问题:私有前缀 边框 背景属性 渐变 前端开发入门笔记(七)
83 2
|
6月前
|
前端开发
【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果(下)
【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果
178 1

热门文章

最新文章