背景样式de七七八八

2024-02-05 11:44
文章标签 背景 样式 de 七七八八

本文主要是介绍背景样式de七七八八,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

一,简介

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

1.1背景颜色(background-color)

background-color:transparent/color;

默认值为transparent(透明的)

1.2背景图片(background-image)

可以是一些logo、装饰图片或背景图片,使用背景做容易控制

background-image:none/url();

默认值是none,url()是必须要有的,在括号里写上绝对或相对地址

1.3背景平铺(background-repeat)

background-repeat:repeat(默认为平铺)/no-repeat(不平铺)/repeat-x(沿x轴平铺)/repeat-y(沿y轴平铺)

注:页面元素可以添加背景颜色也可以添加背景图片 只不过背景图片会压住背景颜色。

 1.4背景图片位置(background-position)

background-position:x y;

参数代表的意思是:x坐标和Y坐标。可以使用方位名词或精确单位。

1.4.1

1°参数是方位名词(top,center,bottom,left,right)

如果指定的两个值都是方位名词,则两个值前后顺序无关。

如果只指定了一个方位名词,另一个省略,那么第二个值默认居中对齐。

2°参数是精确单位

如果参数是精确坐标,那么第一个肯定是x坐标,第二个是Y坐标。

如果只指定了一个数值,那么该数值一定是x坐标,另一个默认垂直居中。

3°参数是混合单位

如果指定的两个值是精确单位和方位名词混合使用,那第一个值是x坐标,第二个值是y坐标。

1.4.2

Demo(王者荣耀):

 1.5背景图像固定(background-attachment)

背景附着,背景图像是否固定或者会随着页面的其余部分滚动。

后期可以制作视差滚动的效果。

background-attachment:scroll(默认值)/fixed

1.6背景属性符合写法

没有先后顺序,但是一般写成

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

background: transparent url( ) repeat-y fixed top;

1.7背景色半透明

background: rgba(0,0,0,0.3)

最后一个参数是alpha透明度,范围在0-1之间。(0为完全透明,1为不透明)

注意:习惯性可以把0.3中的0去掉,写成background: rgba(0,0,0,.3)

背景半透明指盒子背景半透明,盒子里面的内容不受影响。

1.8背景总结

 

这篇关于背景样式de七七八八的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/680810

相关文章

HTML5中下拉框<select>标签的属性和样式详解

《HTML5中下拉框<select>标签的属性和样式详解》在HTML5中,下拉框(select标签)作为表单的重要组成部分,为用户提供了一个从预定义选项中选择值的方式,本文将深入探讨select标签的... 在html5中,下拉框(<select>标签)作为表单的重要组成部分,为用户提供了一个从预定义选项中

前端 CSS 动态设置样式::class、:style 等技巧(推荐)

《前端CSS动态设置样式::class、:style等技巧(推荐)》:本文主要介绍了Vue.js中动态绑定类名和内联样式的两种方法:对象语法和数组语法,通过对象语法,可以根据条件动态切换类名或样式;通过数组语法,可以同时绑定多个类名或样式,此外,还可以结合计算属性来生成复杂的类名或样式对象,详细内容请阅读本文,希望能对你有所帮助...

css渐变色背景|<gradient示例详解

《css渐变色背景|<gradient示例详解》CSS渐变是一种从一种颜色平滑过渡到另一种颜色的效果,可以作为元素的背景,它包括线性渐变、径向渐变和锥形渐变,本文介绍css渐变色背景|<gradien... 使用渐变色作为背景可以直接将渐China编程变色用作元素的背景,可以看做是一种特殊的背景图片。(是作为背

CSS自定义浏览器滚动条样式完整代码

《CSS自定义浏览器滚动条样式完整代码》:本文主要介绍了如何使用CSS自定义浏览器滚动条的样式,包括隐藏滚动条的角落、设置滚动条的基本样式、轨道样式和滑块样式,并提供了完整的CSS代码示例,通过这些技巧,你可以为你的网站添加个性化的滚动条样式,从而提升用户体验,详细内容请阅读本文,希望能对你有所帮助...

vue解决子组件样式覆盖问题scoped deep

《vue解决子组件样式覆盖问题scopeddeep》文章主要介绍了在Vue项目中处理全局样式和局部样式的方法,包括使用scoped属性和深度选择器(/deep/)来覆盖子组件的样式,作者建议所有组件... 目录前言scoped分析deep分析使用总结所有组件必须加scoped父组件覆盖子组件使用deep前言

第49课 Scratch入门篇:骇客任务背景特效

骇客任务背景特效 故事背景:   骇客帝国特色背景在黑色中慢慢滚动着! 程序原理:  1 、 角色的设计技巧  2 、克隆体的应用及特效的使用 开始编程   1、使用 黑色的背景: ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/7d74c872f06b4d9fbc88aecee634b074.png#pic_center)   2

数据中台出现的背景

数据中台产生背景 数据建设中出现的问题 在企业数据建设过程中,都离不开大数据平台建设,大数据平台建设涉及数据采集、数据存储、数据仓库构建、数据处理分析、数据挖掘、数据可视化等一系列流程。 随着企业体量不断增大,一个企业可能有总公司及很多子公司,随着企业各类业务多元化和垂直业务发展,从全企业角度来看,每个子公司或者某些独立的业务部都在构建大数据分析平台,在企业内部形成了很多分散、烟囱式、独立的

PNG透明背景按钮的实现(MFC)

问题描述: 当前要在对话框上添加一个以两个PNG图片作为背景的按钮,PNG图的背景是透明的,按钮也要做出相同的透明效果。并且鼠标不在按钮上时,按钮显示"bg1.png";鼠标移动到按钮上时,按钮显示"bg2.png" 开发环境为VS2010。 解决办法: 使用GDI+库装载PNG图片,并使用MFC Button Control和CMFCButton类结合,调用CMFCButton

在项目开发中,jsp页面不会少了,如何公用页面(添加页面和修改页面)和公用样式代码(css,js)?

在项目开发中,如何公用添加页面和修改页面? <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><html><head><title>岗位设置</title><%@ include file="/WEB-INF/jsp/public/common.jspf"%></head><body> <!-- 标

AIGC大模型智能抠图(清除背景):Sanster/IOPaint,python(2)

AIGC大模型智能抠图(清除背景):Sanster/IOPaint,python(2)   在文章(1)的基础上,尝试用大模型扣除图中的某些主要景物。 1、首先,安装插件: pip install rembg   2、第1步安装成功,启动webui,注意,这里要启用清除背景/抠图的插件 --enable-remove-bg : iopaint start --model=lama