前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >9.26【前端开发】背景属性:样式中背景色和背景图片样式如何使用?

9.26【前端开发】背景属性:样式中背景色和背景图片样式如何使用?

作者头像
LIYI
发布2020-10-09 10:58:08
9080
发布2020-10-09 10:58:08
举报
文章被收录于专栏:艺述论专栏

背景颜色background-color

初始值transparent ,在 CSS 中,transparent是一种颜色。

代码语言:javascript
复制
    <h1>background-color</h1>
    <style>
        .exampleone {
            background-color: teal;
            color: white;
        }
</style>
    <div class="exampleone">
        background-color
    </div>

背景色可以使用渐变色吗?

代码语言:javascript
复制
background-color: linear-gradient(rgba(0, 0, 255, 0.5);

不可以。渐变色本质上是一种材质,与背景图片属于一类,稍后可以看到, linear-gradient可以用作background-image的属性。

background简写属性

有教程写常规使用方法是这样的:

代码语言:javascript
复制
background:#C00 url(../image/arrow-down.gif) 205px 10px no-repeat;
图片地址,position定位,重复策略样式。

最佳实践,简写语法:

代码语言:javascript
复制
background-repeat background-position/background-size attachment;

简写语法有很多种,但这种综合使用起来最简单。

示例:

代码语言:javascript
复制
background: no-repeat center/80% url("../img/image.png");

示例:

代码语言:javascript
复制
    <h1>background-image</h1>
    <style>
        .b1 {
            width: 500px;
            height: 500px;
            background: url("./b1.png"),
                url("./star.png"),no-repeat center/50% url("./cat.png");
        }
</style>
    <div class="b1">
        background-image
    </div>

从这个简写属性看各个子样式。接下来依次看一下几个样式如何使用。

background-repeat 属性

background-repeat 属性定义背景图像的重复方式。有下面几个值:

代码语言:javascript
复制
/* 单值语法 */
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: space;
background-repeat: round;
background-repeat: no-repeat;

/* 双值语法: 水平horizontal | 垂直vertical */
background-repeat: repeat space;
background-repeat: repeat repeat;
background-repeat: round space;
background-repeat: no-repeat round;

示例:

代码语言:javascript
复制
    <h1>background-repeat 属性</h1>
    <style>
        .one {
            background-repeat: round;
            background-image: url(./star.png);
            width: 490px;
            height: 400px;
            border: solid;
        }
</style>
    <ol>
        <li>
            <div class="one">&nbsp;</div>
        </li>
    </ol>

background-position属性

这个样式是设置图片在容器里的显示位置的,如果容器视图空间不够的话,它决定了优先显示背景图片的哪个区域。

background-position 为每一个背景图片设置初始位置。

有效值:

代码语言:javascript
复制
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;

/* <percentage> values */
background-position: 25% 75%;

/* <length> values */
background-position: 0 0;
background-position: 1cm 2cm;
background-position: 10ch 8em;

/* Multiple images */
background-position: 0 0, center;

/* Edge offsets values */
background-position: bottom 10px right 20px;
background-position: right 3em bottom 10px;
background-position: bottom 10px right;
background-position: top right 10

background-size

是对容器而言,决定了容器用多大区域显示背景图片。

有效值:

代码语言:javascript
复制
/* 关键字 */
background-size: cover
background-size: contain

/* 一个值: 这个值指定图片的宽度,图片的高度隐式的为auto */
background-size: 50%
background-size: 3em
background-size: 12px
background-size: auto

/* 两个值 */
/* 第一个值指定图片的宽度,第二个值指定图片的高度 */
background-size: 50% auto
background-size: 3em 25%
background-size: auto 6px
background-size: auto auto

/* 逗号分隔的多个值:设置多重背景 */
background-size: auto, auto  // 不同于上面
background-size: 50%, 25%, 25%
background-size: 6px, auto, conta

这行代码:

代码语言:javascript
复制
background-size: auto, auto

代码语言:javascript
复制
background-size: auto auto

只差一个逗号,但前者表示分别设置两个图片的样式,后者表示设置背景图片的宽、高缩放策略。这可以作为一个典型的前端样式面试题。

背景图像background-image

可以使用多个图片,也可以使用线性填充材质。

语法:

代码语言:javascript
复制
background-image:url(图片路径);

示例:

代码语言:javascript
复制
    <h1>background-image</h1>
    <style>
        .b1 {
            width: 500px;
            height: 500px;
            background: url("./b1.png"),
                url("./star.png");
        }
</style>
    <div class="b1">
        background-image
    </div>

使用线性渐变作为背景

语法:

代码语言:javascript
复制
linear-gradient ( position,  color1,  color2,…)

示例:

代码语言:javascript
复制
    <h1>使用渐变背景</h1>
    <style>
        .b2 {
            width: 500px;
            height: 500px;
            background:
                linear-gradient(to bottom right, rgba(255, 255, 0, 0.5), rgba(0, 0, 255, 0.5)),
                url('./b1.png');
        }
</style>
    <div class="b2">
        background-image
    </div>

关于background简写样式,记住最佳实践里的语法就可以了。

代码语言:javascript
复制
background-repeat background-position/background-size attachment;

如果有其它的背景样式需要控制,可以单独再写一个样式控制它。对背景样式的控制,是可以通过加一个“,”逗号实现的。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2020-09-27,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 艺述论 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • background简写属性
    • 最佳实践,简写语法:
      • background-repeat 属性
      • background-position属性
      • background-size
        • 背景图像background-image
        • 使用线性渐变作为背景
        相关产品与服务
        容器服务
        腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档