首页 > 其他分享 >CSS - 背景,设置背景颜色,背景图片,背景图片的显示方式,背景图片的起始位置,背景是否滚掉,背景大小

CSS - 背景,设置背景颜色,背景图片,背景图片的显示方式,背景图片的起始位置,背景是否滚掉,背景大小

时间:2023-01-04 18:00:44浏览次数:51  
标签:显示方式 repeat background 背景 设置 图像 背景图片

1.设置背景颜色

background-color: pink;

background-color: rgb(255,192,203);

/*第四个参数是设置透明度*/
background-color: rgba(255,192,203,0.5);

 

2.设置背景图片

background-image: url("图片地址");

 

3.背景图片的显示方式

background-repeat: repeat;

repeat 背景图像将在垂直方向和水平方向重复 默认值,no-repeat 背景图像将仅显示一次 

repeat-x 背景图像将在水平方向重复,repeat-y 背景图像将在垂直方向重复

 

4.图片的起始位置

background-position: top 10px left 10px;
        
background-position: top 10% left 10%;

第一个参数只能是:top,center,bottom,第二个参数只能是:left,right,center

第一个参数控制 上,中,下,第二个参数控制 左,中,右。后面跟参数是指偏移多少,一般不跟参数

 

5.背景图片是否随着页面滚动

background-attachment: scroll;

background-attachment: fixed;

scroll 滚动 默认值,fixed 固定

 

6.设置背景图片大小

/*当只设置宽度时 高度为auto 图片不变形*/
background-size: 400px;
background-size: 100%;

/*设置背景图片的宽度与高度*/
background-size: 400px 400px;
background-size: 100% 100%;

cover 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域,背景图像的某些部分也许无法显示在背景定位区域中。

contain 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。

 

7.复合写法

background: 颜色 设置图片 设置图片的显示方式 设置是否滚动 设置起始位置;

 

标签:显示方式,repeat,background,背景,设置,图像,背景图片
From: https://www.cnblogs.com/ErenYeager/p/17025625.html

相关文章

  • Java 给PDF文档设置背景颜色和背景图片
    如题,这篇文章主要介绍如何在Java应用程序中给PDF文档设置背景颜色和背景图片。使用组件:Spire.PDFforJava​​下载Spire.PDFforJAVA包​​并解压缩,然后从lib文件夹下导入......
  • Java 给Word不同页面设置不同背景
    Word文档中,可直接通过【设计】-【页面颜色】页面颜色,通过Java代码可参考如下设置方法:1.设置单一颜色背景doc.getBackground().setType(BackgroundType.Color);doc.getBackg......
  • SAP UI5 按钮的类型和背景色设置例子
    我在SAPUI5XML视图里有一个Button控件,类型为Accept:运行时渲染出来的效果如下:这个按钮对应生成的HTML视图代码里,起作用的css:span.sapMBtnInner.sapMBtnAccep......
  • CSS Flex 布局的引入背景
    Flexbox布局(FlexibleBox)模块(截至2017年10月的W3C候选推荐)旨在提供一种更有效的方式来布局、对齐和分配容器中item元素之间的空间,即使它们的大小未知和/或动态,这就......
  • 绘制一张透明背景的单色位图
    在上一篇文章中,我留下了一个谜题:如何使用透明背景绘制一张单色位图。今天我们来揭晓谜底。丑话说前头,我不是一名GDI方面的专家,所以,除了下面讲述的两种方法之外,可能还有我......
  • 在Excel表里面插入背景图
    工作中我们会经常用到MSExcel,通常我们打开MSExcel,里面的工作表都是空白单调的背景。当然了,MSExcel可以在工作簿里面插入背景图片。那么问题来了,如果你没有安装Microsoft......
  • 引图像分割技术!轻松换背景2.0体验
    最近,在刚推出的《轻松换背景》2.0版本中,软件的内外轮廓抠图功能在引入图像分割技术的基础上推出了优化内外轮廓功能。软件名称轻松换背景软件版本2.0正式版软件作者​​......
  • 智慧城市产生的背景是什么?
    1、智慧城市诞生的现实背景  首先,智慧城市的诞生是后金融危机时代提振经济信心、寻求新的经济增长点的现实需求。  其次,智慧城市的诞生是解决当前众多城市病的现实......
  • OpenCV图像旋转,指定填充背景颜色边界颜色
    OpenCV图像旋转,指定填充背景颜色边界颜色OpenCV与图像旋转有关的函数:(1)warpAffine函数INTER_LINEARBORDER_CONSTANTScalar()中文解释:  C++:voidwarpAffine(InputArray......
  • 兼容IE6和Firefox的PNG背景透明CSS…
    <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""​​http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd​​​"><htmlxmlns="​​​http://ww......