0

0

CSS中关于background属性的具体分析

黄舟

黄舟

发布时间:2017-07-21 09:08:02

|

2386人浏览过

|

来源于php中文网

原创

一、background属性可以设置一个元素的背景样式,当然前提是这个元素有具体的宽高值。

先来一个简单的背景设置:

#show-box {
            width: 800px;
            height: 500px;
            background: #000;
            background-image: url(image url);
        }
    

这里只是简单的设置了颜色和背景贴图。

下面让我们来看一下官方的background的属性:

  语法格式:

  background: color position size repeat origin clip attachment image;

立即学习前端免费学习笔记(深入)”;

  注意:如果同时设置了“position”和“size”两个属性,应该用左斜杠“/”,而不是用空格把两个参数值隔开:“position/size”。

1 background: url("img.jpg") center center/100% 100% no-repeat;

  属性表(图片可能会显示得太小,请右键“在新标签中打开”以查看原图):

  background

  1.color:背景颜色值。这个属性会把整个元素添加颜色,而且处于最底层(在有背景图片的情况下就可以看出)。

  可选值:默认是透明,其他值可以通过查看“CSS颜色值表”来设置。

  2.position:背景图片的定位。如果没有图片设置,那么这个属性不起效果。

  可选值:两个参数,水平位置和垂直位置。如果只有一个值,第二个值为“center”。

  默认值是元素的左上顶角。可以使用位置关键字(top,right,bottom,left,center)。百分比(以元素大小为基值)。像素值。

 

  3.size:图片尺寸。应用于图片。

  可选值:两个数值,如果只有一个值,第二个值为auto。

  默认是图片自身大小。可以使用像素值,百分百(以元素大小为基值)。

  cover:等比例缩放图片,覆盖这个元素。类似与windows中桌面背景的“填充”。

  contain:等比例缩放图片,适应元素的宽或者高。类似于windows中桌面背景的“适应”。

  

   4.repeat:平铺方式。

    repeat:完全平铺,复制图片把整个元素填满。(默认)

    repeat-x:水平平铺,在水平方向复制并平铺。

    repeat-y:垂直平铺,在垂直方向复制并平铺。

    no-repeat:不平铺,只使用一张图片。

   5.origin:背景的参考区域。

   可选值:border-box,padding-box,content-box。

和网手机平台商城(WAP2.0)
和网手机平台商城(WAP2.0)

和网商城,手机平台(WAP2.0界面)v1.0测试版(带全站测试数据+图片)。 特色功能: 商品基本信息中编号条型码生成设计中,选择商品类型。 商品价格,支持单一价格,同时支持开启规格,可以分别设置价格。 商品属性,支持自定属性,不同的商品类型加载不同的商品属性,支持按属性检索浏览。 扩展属性:支持添加文字属性,图文属性等,具体功能请试用 赠送礼品:添加购买赠送的礼品(礼品后台管理)。 相关专题

下载

   6.clip:背景的可视区域。

   可选值:border-box,padding-box,content-box。

   对比一下不同值的效果图:

    1.origin:border-box;clip:border-box;

    

 

    2.origin:padding-box;clip:border-box;

    

    3.origin:content-box;clip:border-box;

    

 

    4.origin:border-box;clip:content-box;

    

 

  可以看出,origin设置的是位置,clip则会根据区域裁剪出背景图片。

   

  7.attachment:设置背景图像是否固定或者随着页面的其余部分滚动。

  默认值是scroll:背景图片随页面的其余部分滚动。fixed:背景图像是固定的。

 

  8.多背景设置。

  导入图片:background-image: url(image url);

 

二、多背景设置。

  多背景的写法:使用逗号“,”隔开,继续写背景属性。

  background: color position size repeat origin clip attachment image, color position size repeat origin clip attachment image;

  也可以具体属性单独设置:background-image:url(image url 1),url(image url 2);

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
C++ 设计模式与软件架构
C++ 设计模式与软件架构

本专题深入讲解 C++ 中的常见设计模式与架构优化,包括单例模式、工厂模式、观察者模式、策略模式、命令模式等,结合实际案例展示如何在 C++ 项目中应用这些模式提升代码可维护性与扩展性。通过案例分析,帮助开发者掌握 如何运用设计模式构建高质量的软件架构,提升系统的灵活性与可扩展性。

14

2026.01.30

c++ 字符串格式化
c++ 字符串格式化

本专题整合了c++字符串格式化用法、输出技巧、实践等等内容,阅读专题下面的文章了解更多详细内容。

9

2026.01.30

java 字符串格式化
java 字符串格式化

本专题整合了java如何进行字符串格式化相关教程、使用解析、方法详解等等内容。阅读专题下面的文章了解更多详细教程。

12

2026.01.30

python 字符串格式化
python 字符串格式化

本专题整合了python字符串格式化教程、实践、方法、进阶等等相关内容,阅读专题下面的文章了解更多详细操作。

4

2026.01.30

java入门学习合集
java入门学习合集

本专题整合了java入门学习指南、初学者项目实战、入门到精通等等内容,阅读专题下面的文章了解更多详细学习方法。

20

2026.01.29

java配置环境变量教程合集
java配置环境变量教程合集

本专题整合了java配置环境变量设置、步骤、安装jdk、避免冲突等等相关内容,阅读专题下面的文章了解更多详细操作。

18

2026.01.29

java成品学习网站推荐大全
java成品学习网站推荐大全

本专题整合了java成品网站、在线成品网站源码、源码入口等等相关内容,阅读专题下面的文章了解更多详细推荐内容。

19

2026.01.29

Java字符串处理使用教程合集
Java字符串处理使用教程合集

本专题整合了Java字符串截取、处理、使用、实战等等教程内容,阅读专题下面的文章了解详细操作教程。

3

2026.01.29

Java空对象相关教程合集
Java空对象相关教程合集

本专题整合了Java空对象相关教程,阅读专题下面的文章了解更多详细内容。

6

2026.01.29

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
JS轻松实现打地鼠游戏
JS轻松实现打地鼠游戏

共6课时 | 0.7万人学习

CSS深入理解之border视频教程
CSS深入理解之border视频教程

共7课时 | 1.3万人学习

Sass 教程
Sass 教程

共14课时 | 0.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号