分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 软件开发

css背景设置

发布时间:2023-09-06 02:31责任编辑:沈小雨关键词:暂无标签

1、 背景颜色

  • background-color:后面跟颜色属性

2、 背景图片

  • background-image
    属性允许指定一个图片展示在背景中(只有CSS3才可以多背景)可以和 background-color 连用。 如果图片不重复的话,图片覆盖不到地地方都会被背景色填充。 如果有背景图片平铺,则会覆盖背景颜色。
  • 参数
    • none:无背景(默认)
    • url:使用绝对或相对地址指定背景图像

3、 背景平铺

  • 即所选背景图片是否填充整个样式区域
  • 语法
    background-repeat : repeat | no-repeat | repeat-x | repeat-y 
  • 参数
    • repeat :  背景图像在纵向和横向上平铺(默认的)
    • no-repeat :  背景图像不平铺
    • repeat-x/y :  背景图像在横向/纵向上平铺

4、 背景位置

  • 调整背景图片在区域内的样式
  • 语法
    background-position : x坐标 y坐标
  • 参数
    • 使用top bottom left right center定位,没有顺序
      background-position: top left; ???// 左上角background-position: top; ???????????//只写一个默认另一边居中
    • 直接写像素
      background-position: 12px 30px ???// x,y轴顺序

5、 背景附着

  • 设置背景是随内容滚动还是固定
  • background-attachment
  • 参数
    • scroll:滚动
    • fixed:固定
以上背景可以简写,类似padding或margn属性一样,按照顺序即可

background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置

6、背景透明(CSS3)

  • CSS3支持背景半透明的写法语法格式是:
    • background: rgba(0,0,0,0.3);
      最后一个参数是alpha 透明度 取值范围 0~1之间
      注意: 背景半透明是指盒子背景半透明, 盒子里面的内容不收影响。

css背景设置

原文地址:https://www.cnblogs.com/kasi/p/10336583.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved