CSS如何设置背景属性(详解)

本文给大家详解css如何设置背景属性,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

背景相关属性主要有:

background-color  背景颜色 

background-image 背景图片

background-repeat 是否平铺 repeat (默认平铺) | repeat-x(水平平铺) | repeat-y (垂直平铺)| no-repeat (不平铺)

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

background-position 背景位置  length(百分数)|position(top center button left right) 一般两个一起用,如果至指定一个方向另一个方向默认为center,两种方法也可以混搭。方位名词没有顺序区分,而使用百分数时时有顺序的,先是水平后是垂直

background-attachment 背景固定还是滚动 scroll | fixed

background:背景颜色 背景图片 是否平铺 背景固定还是滚动 背景位置

  #p1 {            width: 300px;            height: 300px;            background-color: blue;            /*默认是transparent透明的*/            /* background-color: transparent; */            background-image: url(Images/2.jpg);            background-repeat: no-repeat;            /*不平铺,默认是水平垂直平铺*/            /* background-repeat: repeat-y; */            /* background-repeat:  repeat-x; */            /* background-position: right bottom; */            background-position: 10% center;            background-attachment: fixed;        }

想要背景半透明 在指定颜色时使用 rgba( r, g b ,a) ,a就是指明透明度

p {            width: 100%;            height: 300px;            background-color: rgba(0, 0, 0, 0.6);        }

当要使用多张背景图片时使用background来指定多个url,每组之间用‘,’逗号隔开,若图片有重叠,则前一张覆盖后一张图片,但是整体背景颜色必须在最后一个url后指定。

p {            width: 100%;            height: 300px;            background: url(Images/2.jpg) no-repeat left top, url(Images/3.jpg) no-repeat right bottom blue;        }

总结:以上就是本篇文的全部内容,希望能对大家的学习有所帮助。更多相关教程请访问 CSS基础视频教程, CSS3视频教程!

以上就是CSS如何设置背景属性(详解)的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1612403.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月24日 02:57:30
下一篇 2025年12月24日 02:57:39

相关推荐

  • css如何设置颜色值?rgb()设置颜色(代码实例)

    css如何设置颜色值?本篇文章就给介绍在css中如何用rgb()来设置颜色,让大家可以了解rgb()设置颜色的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 首先我们来了解一下rgb是什么意思? RGB:一种色彩模式 ,是工业界一种颜色标准;可以通过对红(R)、绿(G)、蓝(…

    2025年12月24日
    000
  • 如何使用纯CSS实现热气球的效果(附源码)

    本篇文章给大家带来的内容是关于如何使用纯css实现热气球的效果(附源码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 效果预览 源代码下载 https://github.com/comehope/front-end-daily-challenges 代码解读 定义 dom,容器中…

    2025年12月24日
    000
  • css如何对文本进行修饰?css修饰文本样式的9种属性(总结)

    css如何对文本进行修饰?本篇文章就给大家总结了css修饰文本文字的一些方法,介绍一些css 修饰文本的属性,让大家了解css修饰文本文字的9种属性有哪些。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 1、css设置文本文字颜色的属性 color属性:设置文本文字颜色。用法如下:…

    好文分享 2025年12月24日
    000
  • 如何利用css的background绘制图形 (附代码)

    本篇文章给大家带来的内容是关于如何利用css的background绘制图形 (附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 相信大家在平时工作中少不了会被要求在某些元添加一些特殊的背景图片,这时候通常就拿起ps就是切切切。不说这种方式麻烦,有ui给你切好的情况已经不错,没…

    2025年12月24日 好文分享
    000
  • 详解CSS pointer-events属性的使用

    这篇文章主要介绍了css pointer-events属性的使用,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 在前端的开发中,我们都是直接与用户接触,应该尽量让用户感到操作畅快愉悦,获得类似native的感觉。其中动画是最常用的方法。 这里的需求是,弹层的设计,这个弹层希望可以…

    2025年12月24日
    000
  • css实现酷炫的右侧悬浮菜单栏效果(代码实例)

    本文给大家介绍css如何实现酷炫的右侧悬浮菜单栏效果,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 默认显示效果: 鼠标悬浮效果:   HTML、JS代码如下: 立即学习“前端免费学习笔记(深入)”; *{margin:0;padding:0;} body{ color:#333…

    2025年12月24日
    000
  • PC端移动端不同屏幕大小下响应式布局

    本文给大家介绍pc端移动端不同屏幕大小下响应式布局,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 先上效果图: PC端效果: 移动端效果: 代码如下: 响应式布局1234 pc.css  样式代码: *{margin:0;padding:0;}ul{width:calc(100%…

    2025年12月24日
    000
  • 带你进一步认识CSS的层叠概念

    本篇文章给大家带来的内容是关于带你进一步认识css的层叠概念,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 最近在项目的过程中遇到了一个问题,menu-bar希望始终显示在最上面,而在之后的元素都显示在它之下,当时设置了 z-index 也没有效果,不知道什么原因,因此找了一下cs…

    2025年12月24日
    000
  • 如何使用纯CSS制作特效导航条?

    本文给大家介绍如何使用纯css制作特效导航条,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 先上张图,看看效果: 在继续阅读下文之前,你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果。 OK,继续。这个效果是我在业务开发的过程中遇到的…

    2025年12月24日 好文分享
    000
  • css实现页面内容不够高footer始终位于页面的最底部效果

    本文给大家介绍css如何实现页面内容不够高footer始终位于页面的最底部效果,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 相信很多前端工程师在开发页面时会遇到这个情况:当整个页面高度不足以占满显示屏一屏,页脚不是在页面最底部,用户视觉上会有点不好看,想让页脚始终在页面最底部,…

    好文分享 2025年12月24日
    000
  • css如何设置字母的大小写?text-transform属性设置字母的大小写(介绍)

    有的时候我们需要让英文单词或拼音首个字母大写;或者需要让全文中英文单词全大写或小写。那么这样的效果?本篇文章就给大家介绍css设置字母大小写的方法,让大家了解text-transform属性是怎样设置字母的大小写的。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 首先我们来了解一下…

    2025年12月24日
    000
  • css如何实现首字下沉效果?伪元素+浮动实现效果(代码实例)

    在word文档中有一个首字下沉功能,可以在文章的排版时使用,有时能给文章增色不少。那么css可以实现这样的效果吗?本篇文章就给大家介绍css是如何实现首字下沉效果的,让大家可以了解如何用css的伪元素+浮动实现首字下沉效果。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 在css中…

    2025年12月24日 好文分享
    000
  • css的initial-letter属性实现首字下沉效果(代码实例)

    css如何实现首字下沉效果?本篇文章就给大家介绍css是如何实现首字下沉效果的,让大家了解用initial-letter属性是怎样实现首字下沉效果的。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 首先我们来了解一下initial-letter属性要怎样实现首字下沉效果吧! ini…

    2025年12月24日 好文分享
    000
  • 如何使用CSS实现眼冒金星的动画效果(附源码)

    本篇文章给大家带来的内容是关于如何使用css实现眼冒金星的动画效果(附源码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 效果预览 源代码下载 https://github.com/comehope/front-end-daily-challenges 代码解读 定义 dom,容…

    2025年12月24日
    000
  • PC端无论页面有没有完全撑开把footer保持在最底部(不用定位)

    最近在写项目,有的页面没有占到一屏,然后footer也就是底部就靠上了,这样很影响美观,于是在网上找了找,下面是我的成果 解决该问题的最好方法是采用CSS3提供的一种先进布局模型 :flexbox,可以建立具有适应性的布局。 下面我们代码走起来 ……… html{ height: 100…

    好文分享 2025年12月24日
    000
  • css怎样给字体和元素加阴影?text-shadow和box-shadow实现

    本文给大家介绍css怎样给字体和元素加阴影?text-shadow和box-shadow实现。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 1、语法:  对象选择器 {text-shadow:X轴偏移量 Y轴偏移量 阴影模糊半径 阴影颜色}  注:text-shadow可以使用一…

    2025年12月24日
    000
  • css如何设置背景图片的平铺方式?css设置背景图片平铺的方法(图文详解)

    css如何设置背景图片的平铺方式?本文就给大家介绍css是如何设置背景图片平铺的方法,让大家了解在css中设置背景图片水平方法平铺、垂直方向平铺,或者是不平铺的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 当我们使用background-image属性让一张背景图片在页面上…

    2025年12月24日 好文分享
    000
  • css如何实现首行缩进效果

    css实现首行缩进效果的方法:首先创建一个HTML示例文件;然后在body中定义一些文本段落;最后在css中使用text-indent属性来实现首行缩进效果即可。 本文操作环境:Windows7系统、Dell G3电脑、HTML5&&CSS3版。 在css中,我们可以使用text-i…

    2025年12月24日 好文分享
    000
  • css如何自定义checkbox样式?(代码实例)

    css如何自定义checkbox样式?本文给大家介绍css实现修改原生checkbox样式,自定义checkbox样式的方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 先看看效果 原理 1.利用CSS3属性 appearance。 该属性(强制)更改(改变)默认(原生)样式。…

    2025年12月24日
    000
  • 前端移动开发之使用rem实现自适应的效果

    本文给大家介绍php的三种常用的加密解密算法,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 前言 作为一名前端工程师,我们不仅要会PC端开发,还要会移动端开发,而且现在移动端占据主要流量,所以掌握移动端开发的技能更是必须的。 那么进行移动端的开发,什么是必须,我们想要的效果是什么…

    2025年12月24日 好文分享
    000

发表回复

登录后才能评论
关注微信