CSS background 背景

这篇具有很好参考价值的文章主要介绍了CSS background 背景。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

background属性为元素添加背景效果。

它是以下属性的简写,按顺序为:

  1. background-color
  2. background-image
  3. background-repeat
  4. background-position
  5. background-size
  6. background-origin
  7. background-clip
  8. background-attachment
.element {
  background: #ff0000 url('background.jpg') no-repeat top right / 200px 150px content-box border-box fixed;
}

以下所有示例中的花花.jpg图片的大小是48×48


1 background-color

background-color指定元素的背景色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 背景色 Demo</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        .container {
            width: 200px;
            height: 200px;
            background-color: #f0f0f0;
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: #f00;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
    </div>
</body>
</html>

CSS background 背景,CSS,css,前端


2 background-image

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 背景图片 Demo</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        .bg {
            width: 96px;
            height: 96px;
            background-image: url('./花花.jpg')
        }
    </style>
</head>

<body>
    <div class="bg"></div>
</body>

</html>

CSS background 背景,CSS,css,前端

背景图片默认是重复的(repeat)。


3 background-repeat

它具有以下值。

1)默认值repeat

repeat会裁剪重复图片超出的部分。

.bg{
    width: 120px;
    height: 96px;
    background-repeat:repeat;
}

CSS background 背景,CSS,css,前端

2)space

space是无裁剪的重复。

其重复原理:

  • 如果图片不能刚好放下,剩余长或宽将均匀分布在图片之间。
  • 第一张图片一定从左上方的顶点位置开始排列。
  • 如果图片大小超出容器大小,那么将被裁剪。
.bg{
    width: 120px;
    height: 96px;
    background-repeat:space;
}

CSS background 背景,CSS,css,前端

.bg{
    width: 160px;
    height: 96px;
    background-repeat:space;
}

CSS background 背景,CSS,css,前端

3)round

round是自适应重复,相比较于space,它会根据元素与图片的大小关系拉伸或缩小图片。

比如说,一个图片长为 x x x,元素长为 X X X n x ≤ X ≤ m x nx \leq X \leq mx nxXmx,如果 X X X更靠近 n x nx nx,那么图片将被放大,如果 X X X更靠近 m x mx mx,那么图片将被缩小。

4)no-repeat

no-repeat设置图片不允许重复。


4 background-position

background-position用于设定图片的位置,其值类型如下:

.bg{
    /*关键字*/
    background-position:top;
    background-position:bottom;
    background-position:center;
    background-position:left;
    background-position:right;
    
    /*百分比值*/
    background-position:50% 50%;
    
    /*长度值*/
    background-position:10cm 10cm;
    
    /*边界偏移值*/
    background-position:top 10em left 10px;
    
    /*全局值*/
    background-position:inherit; /*继承父元素*/
    background-position:initial; /*设置为初始值,默认*/
    background-position:revert; /*重置为样式表中的值*/
    background-position:unset; /*重置为初始值,如果父元素背景位置有定义,继承父元素的值*/
}

5 background-size

用于控制背景图片的尺寸和适应方式。

初始值:auto auto。

以下是一些常见的 background-size 值和解释:

示例使用背景图片(390x693 ):

CSS background 背景,CSS,css,前端

1)auto

默认值,背景图片大小保持原始尺寸,不进行缩放。

2)长度值

使用指定的长度单位(如像素)设置背景图片的宽度和高度。

例如,background-size: 200px 100px; 将背景图片的宽度设置为 200 像素,高度设置为 100 像素。

如果只设置一个值,那么该值将作为宽度,高度设为auto。

3)百分比

使用指定的百分比值设置背景图片的宽度和高度。

百分比是相对于包含元素的宽度和高度计算的

例如,background-size: 50% 75%; 将背景图片的宽度设置为元素宽度的 50%,高度设置为元素高度的 75%。

4)cover

背景图片会完全覆盖整个元素,可能会裁剪部分图片。

背景图片会被**等比例缩放,**以适应元素的较小维度,然后将其余部分裁剪掉,以确保整个元素都被覆盖。

较小维度是看 元素长/图片长 以及 元素宽/图片宽 的比值大小。

width: 390px;
height: 500px;
background-size:cover

CSS background 背景,CSS,css,前端

5)contain

确保整个背景图片完全包含在元素内,不会裁剪图片。

背景图片会被等比例缩放,以适应元素的较大维度,以确保整个图片都可见,不会被裁剪。

width: 390px;
height: 500px;
background-size:contain

CSS background 背景,CSS,css,前端

6 background-origin

指定背景图片的原点位置在哪个区域的左上角。

该属性有以下值:

1)padding-box:默认值。

.bg {
    width: 48px;
    height: 48px;
    background-image: url('./花花.png'); 
    background-origin: padding-box;
    padding: 5px;
    border: 5px solid #b95353;
}

CSS background 背景,CSS,css,前端

2)border-box

CSS background 背景,CSS,css,前端

3)content-box

CSS background 背景,CSS,css,前端

7 background-clip

background-clip 设置元素的背景(背景图片或颜色)是否延伸到边框、内边距盒子、内容盒子下面。

CSS background 背景,CSS,css,前端

8 background-attachment

background-attachment决定图片的滚动行为。

其值包括:

scroll(默认值):背景图片随页面滚动而滚动。

CSS background 背景,CSS,css,前端

fixed:背景图片不会随页面滚动而滚动,而是相对于视口的原点(左上角)固定。

CSS background 背景,CSS,css,前端

我们观察到这两个元素的背景图片是重叠在一起了。

local:不随页面滚动,但随元素内部滚动而滚动。

CSS background 背景,CSS,css,前端文章来源地址https://www.toymoban.com/news/detail-667713.html

到了这里,关于CSS background 背景的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • css 背景是个图片并且含有透明度的渐变色.超级简单。background相关属性就行了

    底纹是个背景图片。 然后上面有个渐变色。渐变色含有透明度这样才能把底纹显示出来 不用麻烦的把图片放进去各种定位修改层级来写啦。 直接一个background相关属性就行了。 背景色怎么增加透明度呢 使用rgba的方式rgba(127,47,255, 0.7 )。 //0.7是透明度

    2024年01月16日
    浏览(42)
  • 【前端 - CSS】第 18 课 - 背景属性

            欢迎来到博主 Apeiron 的博客,祝您旅程愉快 ! 时止则止,时行则行。动静不失其时,其道光明。 ​​​​​​​   目录 1、缘起 2、背景属性 2.1、背景图 2.2、背景图平铺方式  2.3、背景图位置  2.4、背景图缩放  2.5、背景图固定 2.6、背景复合属性 3、总结 

    2024年01月23日
    浏览(58)
  • 〖大前端 - 基础入门三大核心之CSS篇⑱〗- CSS中的背景

    说明:该文属于 大前端全栈架构白宝书专栏, 目前阶段免费开放 , 购买任意白宝书体系化专栏可加入 TFS-CLUB 私域社区。 福利:除了通过订阅\\\"白宝书系列专栏\\\"加入社区获取 所有 付费专栏的内容之外, 还可以通过加入 星荐官共赢计划 加入私域社区。 当前子专栏 基础入门

    2024年02月01日
    浏览(46)
  • 前端成神之路-CSS(选择器、背景、特性)

    目录 前端成神之路-CSS(选择器、背景、特性) CSS 第二天 1. CSS复合选择器 1.1 后代选择器(重点) 1.2 子元素选择器 1.3 交集选择器 1.4 并集选择器(重点) 测试题 1.5 链接伪类选择器(重点) 1.6 复合选择器总结 2. 标签显示模式(display)重点 2.1 什么是标签显示模式 2.2 块级

    2024年02月08日
    浏览(41)
  • 【前端】深入解析CSS:选择器、显示模式、背景属性和特征剖析

    CSS(层叠样式表)作为前端开发的核心技术之一,为网页赋予了美观和交互性。本文将深入探讨CSS的复合选择器、元素显示模式、背景属性以及其三大特征,帮助读者更好地理解和应用CSS。 后代选择器 又称为 包含选择器 ,可以选择父元素里边子元素,其写法就是把外层标签

    2024年02月11日
    浏览(37)
  • 前端,CSS,背景颜色跟随轮播图片改变而改变(附源码)

    首先看效果! 比如轮播图时红色,那么背景的底色也是红色,轮播图时黄色,背景的底色也是黄色,这就是根据轮播图的图片切换,而改变背景颜色随轮播图颜色一致 话不多说,直接上代码!非常简单 轮播图代码就不放上去了,直接使用插件 swiper ,选择你喜欢的版本 就可

    2024年02月22日
    浏览(46)
  • CSS笔记(黑马程序员pink老师前端)选择器,字体,文本属性,Emmet语法,元素显示模式,CSS背景

    选择器分为基础选择器和复合选择器两大类。 基础选择器 包括:标签选择器、类选择器、id选择器和通配符选择器。 多类名 可以把一些标签元素共同的样式放到一个类里面。这些标签都可以调用这个公共的类,然后再调用自己独有的类。 复合选择器 基础选择器的组合.包括后

    2024年02月09日
    浏览(57)
  • CSS 之 background 系列属性详解

    一、background总览 1、简介 background 属性是所有背景属性的缩写,通常建议在代码中使用该缩写属性,而不是使用多条单独的背景属性,因为该缩写属性在老版本浏览器中支持性更好,而且书写简便。未写在缩写属性中的其他背景属性,则会采用默认值。 但我个人不提倡一味的

    2024年02月12日
    浏览(44)
  • 【零基础学web前端】CSS学习,字体属性,文本属性,背景属性,圆角矩形属性

    前言: 大家好,我是 良辰丫 ,在上一篇文章中我们了解了CSS引入方式,CSS基础选择器,CSS复合选择器,今天我们继续学习CSS的相关知识点.💞💞 🧑个人主页:良辰针不戳 📖所属专栏:零基础学web前端 🍎励志语句:生活也许会让我们遍体鳞伤,但最终这些伤口会成为我们一辈子的

    2024年02月05日
    浏览(79)
  • CSS:background 复合属性详解(用法 + 例子 + 效果)

    background-image:linear-gradient(角度(deg),颜色1,颜色2, …); 线性渐变(渐变方向,颜色1-颜色2-…) 在 背景颜色之上 横向repeat-x, 纵向repeat-y; 默认repeat,可设为不重复no-repeat background-repeat:round; 个体完整,微调大小 background-repeat:space; 调整空隙 background-size:宽度,高度; 单位可以是

    2024年02月13日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包