背景颜色及背景图片相关的属性

1.background-color
  设置背景颜色,取颜色值
  注意:
    1.所有元素默认的背景颜色都是透明色,新建窗口的白色不是body的背景色,是浏览器渲染的
    2. 背景颜色从边框位置开始绘制
    3. 如果元素添加内边距,也会按照背景颜色进行填充

2.背景图片
  1.设置背景图片
    属性:background-image
    取值:url()
    注意:1.背景图片的尺寸如果大于元素尺寸,图片仍然按照原始尺寸显示,超出元素的部分不可见
       2.背景图片的尺寸小于元素尺寸,浏览器会自动对背景图片重复平铺,直到铺满元素
       3.背景图片与背景颜色一样,不影响元素正常显示
  2.设置背景图片的重复方式
    图片尺寸不够时,浏览器会自动沿水平和垂直两个方向对图片进行重复平铺,直到铺满元素
    属性:background-repeat
    取值:1.repeat:默认值,沿水平和垂直方向平铺
       2.repeat-x:沿水平方向平铺
       3.repeat-y:沿垂直方向平铺
       4.no-repeat:设置背景图片不重复平铺
  3.设置背景图片的位置
    1.属性:background-position
    2.取值:x y
      1.取像素值:
        x:表示背景图片水平方向的偏移距离
         正值表示图片向右偏移,负值表示图片向左偏移
        y:背景图片垂直方向的偏移距离
         正值表示图片向下偏移,负值表示图片向上偏移
        注意:结合“精灵图”实现元素背景图片调整,这种技术叫“精灵技术”
      2.取百分比
        参照元素尺寸计算水平和垂直偏移距离
        1. 0% 0%:背景图片显示在元素左上角
        2. 50% 50%:背景图片显示在元素中间
        3. 100% 100%:背景图片显示在元素右下角
      3.方位值确定背景图片的位置
        x:left / center / right
        y: top / center / bottom
        如果只设置一个方向上的关键字,另外一个方向默认是center
  4.设置背景图片的大小
    1.属性:background-size
    2.取值:x y
      x y分别表示背景图片的宽和高
      1.像素值
      2.百分比:参照元素宽高尺寸计算背景图片大小
      3.cover:表示将图片等比放大至完全覆盖元素,超出部分不可见
      4.contain:表示将图片等比拉伸至刚好被元素容纳,不能超出元素尺寸,可能或造成背景图片无法完全覆盖元素的效果
  5.背景属性简写
    1.属性:background
    2.取值:color url() repeat position
    注意:1.背景属性按照上面取值的顺序设置
       2.background-size单独设置

转载于:https://www.cnblogs.com/zengsf/p/9794104.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/265744.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

评论安装_评论送|机电安装监理质量控制要点130页

来源:网络整理, 如有侵权请联系删除因本文篇幅有限,只能展示60页,全部130页需要您对本文进行精彩评论或者转发分享,加微信dahe0608送给您本文的ppt原件因本文篇幅有限,只能展示60页,全部130页需…

积跬步-java任职要求

2019独角兽企业重金招聘Python工程师标准>>> 1.JAVA基础扎实,熟悉io、多线程、集合等基础框架,熟悉分布式、缓存、消息、搜索等机制; 2.四年以上使用java进行web开发的经验,熟练使用spring 、MVC等框架,熟悉…

MIPS内联汇编

0X0 近几天使用内联汇编来完成部分功能,下面总结下基础知识点,以便以后查询 语法基本结构 __asm__ __volatile__("汇编语句\n\t""汇编语句\n\t":输出寄存器:输入寄存器:寄存器破坏表);‘:’把内联汇编分割为了4个部分 第一部分 如…

安卓APP_ 控件(11)webView —— 简单应用:显示网页

摘自:安卓APP_ 控件(11)webView —— 简单应用:显示网页 作者:丶PURSUING 发布时间: 2021-05-11 11:50:52 网址:https://blog.csdn.net/weixin_44742824/article/details/116602469 目录 简单了…

Python 抓取数据存储到Mysql中

# -*- coding: utf-8 -*- import os,sys import requests import bs4 import pymysql#import MySQLdb#连接MYSQL数据库 db pymysql.connect(host127.0.0.1,userroot,passwordmysql,dbtest,port3306,charsetutf8) #db MySQLdb.connect(127.0.0.1,root,mysql,test,coon.set_cha…

ios 去掉底部状态栏_iOS 隐藏状态栏

1.整个项目隐藏状态栏在Targets->General->勾选中Hide status bar2.单个界面隐藏状态栏,例如登录注册页面1.首先在info.plist里面View controller-based status bar appearance 设置为 NO.2.在需要调控状态栏的ViewController类中添加以下代码://进入时隐藏-(void)viewWi…

QT应用开发基础

目录前言Windows上搭建开发环境C基础什么是C什么是面向对象,什么又是面向过程c的灵魂:c的类对象:类的实例化怎么访问类的成员类的函数成员类的访问修饰符函数的重载构造函数和析构函数类的继承虚函数和纯虚函数制作一个简单的QT界面创建工程U…

meson构建系统

简介 Meson是一个构建系统,它被设计成在不牺牲性能的前提下尽可能的友好。这方面的主要工具是用户用来描述构建结构的自定义语言。这种语言的主要设计目标是简单、清晰和简洁。很多灵感都来自于Python编程语言,它被认为是非常易读的,即使对以…

射灯安装方法图解_江苏天筑不锈钢雕塑厂家格栅射灯安装方法,格栅射灯安装注意事项...

格栅射灯安装方法,您是否已经学会了呢?不管您会不会,今天江苏天筑不锈钢雕塑厂家就结合这个问题,一起来为大家详细介绍这部分内容的一些相关的注意事项,南方的天气比较潮湿,所以我们尽量不要把格栅射灯安装…

在centos8 stream启用 Extra Packages

前言 最近把一台机器装了centos8 stream,centos8 的维护周期将会在2021-12-31结束 而centos8 stream和centos8有什么区别呢?我参考官方的描述简单总结下 由下游变更到上游 centos8是RHEL的rebuild版本,所以是处在下游的,意思是收…

ARM体系结构简介 —— 迅为

目录单片机和ARM处理器内存管理单元(MMU)高速缓冲存储器(CACHE)指令集ARM的指令系统ARM处理器工作模式ARM处理器的内部寄存器ARM处理器的异常ARM中断向量ARM架构的发展单片机和ARM处理器 内存管理单元(MMU)…

getElementById() getElementsByName() getElementsByTagName()

http://www.cnblogs.com/winner/archive/2007/03/28/593028.html1、getElementById()getElementById()可以访问DOCUMENT中的某一特定元素,顾名思义,就是通过ID来取得元素,所以只能访问设置了ID的元素。比如说有一个DIV的ID为docid&#xff1a…

网口扫盲二:Mac与Phy组成原理的简单分析(转)

1. general 下图是网口结构简图.网口由CPU、MAC和PHY三部分组成.DMA控制器通常属于CPU的一部分,用虚线放在这里是为了表示DMA控制器可能会参与到网口数据传输中. 对于上述的三部分,并不一定都是独立的芯片,根据组合形式,可分为下列三种方案: CPU集成MAC与PHY;CPU集成MAC,PHY采用…

python拼接两个数组_在Python中连接两个数组

根据你的描述,你的案子看起来像:In [344]: a[np.arange(5),np.arange(5)]In [345]: b[np.arange(5),np.arange(3)]In [346]: aOut[346]: [array([0, 1, 2, 3, 4]), array([0, 1, 2, 3, 4])]In [347]: bOut[347]: [array([0, 1, 2, 3, 4]), array([0, 1, …

设置git协议clone代理

0x0 最近在clone yaffs2仓库时发现clone的异常缓慢,就算开了代理也是,搜索一番发现网上大多都是将设置http、https、ssh协议的代理,对于git协定的代理讲的很少,下面分享下如何让git协议走socks代理 以下内容前提是里已经在电脑上…

vue-cli 3.0安装和使用

零. 前言 公司最近开发项目使用的是vue-cli 3.0版本开发,但是对于vue-cli 3.0版本一直没有研究过如何使用,公司使用配置:pug ts stylus eslint;编辑器使用:vscode,使用起来简直不要太爽。 默认你已经安装…

lucene 入门整理

2019独角兽企业重金招聘Python工程师标准>>> 1. 概述 Lucene是一个全文检索引擎的架构,提供了完整的查询引擎和索引引擎。Lucene以其方便使用、快速实施以及灵活性受到广泛的关注。它可以方便地嵌入到各种应用中实现针对应用的全文索引、检索功能&am…

bits/libc-header-start.h: No such file or directory

问题描述 最近需要在debian 安装下arm和riscv的交叉工具链 sudo apt install gcc-10-riscv64-linux-gnu在安装完后使用交叉工具链编译东西时报错 orangepiorangepi4-lts:~/float-test$ riscv64-linux-gnu-gcc-10 float-cmov3.c -O2 -S In file included from float-cmov3.c:…

安卓APP开发基础

目录安卓工程构建第一个APP运行安卓的工程目录文件夹介绍安卓APP启动过程安卓布局控件布局的种类布局和页面的关系显示一张美女图显示两个美女常用布局之相对布局基础控件之Button,TextView,EditText,ImageView, padding和margin(内外边框)相对布局综合小演练-智能家居刷卡界面…