CSS3背景色 背景图片以及它的调整

最新推荐文章于 2022-06-20 08:00:00 发布
最新推荐文章于 2022-06-20 08:00:00 发布
阅读量168 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/taochiyudadada/article/details/105419728
版权

内联样式
在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述左边的图片覆盖右边的图片

位置颠倒后：变成看不见🐢了
在这里插入图片描述在这里插入图片描述在这里插入图片描述避免图像重复
在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述防止文本被覆盖
调整图像位置

在这里插入图片描述10px是水平距离 50px是垂直距离
在这里插入图片描述在这里插入图片描述背景图片调整

在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述它在body父类里 它也会随着页面大小来改变

在这里插入图片描述在这里插入图片描述随着内容的变化而变化 ，还是固定不动
在这里插入图片描述在这里插入图片描述随着内容的滚动，背景图像而滚动

在这里插入图片描述
它可以跟着页面一起动
在这里插入图片描述直接固定不动 background-size直接对它无效了
在这里插入图片描述
在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述指定背景图像开始绘制的位置
在这里插入图片描述
在这里插入图片描述在这里插入图片描述在这里插入图片描述background-clip指定图像显示区域

属性值与background-origin一样，

在这里插入图片描述在这里插入图片描述在这里插入图片描述可以直接用background+所有属性来完成

在这里插入图片描述在这里插入图片描述可以替换为：

在这里插入图片描述在这里插入图片描述

upload_drop
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css3中的背景色
XianRenShan的博客
12-30 722
background-color:rgba(212,0,0,0.2);  前3个参数是RGB值，即Red红色,Green绿色,Blue蓝色 第四个参数是透明值，0.2为不透明度
css3背景颜色样式,css3的关于背景的设置样式
weixin_33795788的博客
08-03 462
设置圆.radious{实心上半圆height: 50px;width: 100px;background-color: red;border-radius: 50px 50px 0px 0px;*//*实心圆*/height: 100px;width: 100px;background-color: red;border-radius: 50px;/*实心左半圆 添加阴影的设置*/heigh...
CSS3 色彩与背景设置
weixin_44055272的博客
03-16 150
色彩 表示颜色的三种方法 1.字符串表示法 2.rgba表示法 3.六位十六进制表示法 <style> p { background-color:#ff0000; } </style> </head> <body> <h1>这是标题 1<
css background背景详解
cxz
03-26 436
背景简写 background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置 background: transparent url(image.jpg) repeat-y scroll 50% 0 ; 背景图片(image) background-image : none | url (url) 参数： none : 　无背景图（默认的） url : 　使用绝对或相对地址指定背景...
通过修改父类,改变子类的cell的背景颜色及图片
晓阳依旧的专栏
02-03 547
因项目需求，需要将项目中所有tableView的列表做成便签效果，若在每个页面分别修改下类太过麻烦 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath 好在这些页面都集成于一个UITableView父类，于是在父类中加入如下代码： -(
CSS3彩色圆点排列背景特效
07-24
"CSS3彩色圆点排列背景特效"就是利用CSS3的特性来实现的一种创新性设计，它可以为网页增添动态且富有韵律感的视觉元素。这种特效通常用于提升网站的视觉吸引力，尤其是在首页或特定的UI组件上，能够增加用户的互动...
CSS3紫色菱形图案背景特效
06-26
"CSS3紫色菱形图案背景特效"是一个利用CSS3的linear-gradient属性来实现的独特设计，它为网页的body元素赋予了一种引人注目的菱形图案背景。这种背景特效不仅增添了网页的视觉吸引力，还可以根据需求进行个性化定制...
css背景颜色透明背景图片切换效果
12-07
总的来说，实现“css背景颜色透明背景图片切换效果”需要熟练掌握CSS的背景颜色、透明度、过渡和关键帧动画等属性，以及JavaScript事件监听和图片切换逻辑。这个效果不仅增强了网页的视觉吸引力，也提升了用户的交互...
CSS3全屏彩色水泡泡背景特效
06-24
在本文中，我们将深入探讨如何使用CSS3来创建一个全屏彩色水泡泡背景特效，这是一种在现代网页设计中常用来增强用户体验的动态视觉效果。这个特效利用了HTML5和CSS3的强大功能，使得网页背景充满生机，吸引用户注意...
css3编写浏览器背景渐变背景色的方法
09-24
【CSS3 编写浏览器背景渐变背景色的方法】 在CSS3中，我们可以利用多种方式创建背景色渐变效果，让网页元素的背景颜色平滑过渡。这些方法不仅增加了视觉吸引力，还可以帮助设计师创造出独特的界面风格。下面我们将...
（css ）图片压盖效果的案例总结
qq_45685564的博客
07-25 648
（css ）图片压盖效果的案例总结 （初学前端，请多多指教）最近做静态页面，发现有很多图片压盖效果的布局。鼠标放上去的时候，显示下面的文字，鼠标松开，就会隐藏。 那么你们遇到这样的布局会怎么做呢？ 一般会想到浮动和定位。 具体步骤 第一步，先设置几个div，放需要的图片，和要显示的文字。 第二步，使div浮动，令其横向排布。 第三步，使文字定位在div的下方（子绝父相<也就是儿子设置绝对定位，父亲设置绝对定位>） 第四步，设置隐藏 接下来看看具体代码吧 这里是css的代码 *
CSS 3之网页背景颜色
程序员小白的博客
06-20 1379
使用 属性设定网页背景颜色；对于没有设定背景色的标记，默认背景颜色为透明（tranaparent）； 语法格式如下所示： 是默认值，表示透明；背景颜色 color 设定方法能采用英文单词、十六进制、RGB、HSL、HSLA、GRBA 来决定颜色；例子1： 不仅能设定整个网页的背景颜色，还能设置指定 HTML 元素的背景色；例子 2：...
css3背景颜色渐变属性（Gradients）
热门推荐
DevOps海洋的渔夫@专栏
07-25 2万+
在项目中有很多地方可以用到背景色的渐变，例如：左侧菜单栏的背景色，顶部导航栏背景色等等。 CSS3 渐变（Gradients） CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。 以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的时间和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，...
CSS3 基础（3）—— CSS3背景和背景渐变
weixin_39141044的博客
07-01 1万+
一、背景 CSS3中和元素背景相关的属性 属性 说明 background-clip 指定背景的绘制区域 background-origin 设置背景图片的定位 （一）background-clip 设置背景图像区域 background-clip属性指定了背景绘制区域 语法 background-clip: border-box | ...
CSS动画设置
actuutuu的专栏
05-15 499
-moz-animation:myfirst 5s; /* Firefox */ -moz-animation-iteration-count:infinite;
css中设置背景颜色、背景图片
zjy123078_zjy的博客
03-21 6954
对于在css中设置背景分为两种形式： 1. 设置纯色为背景。背景background可以设置为纯色的背景颜色。 2. 设置图片为背景。可以设置对象背景为图片，如果背景是图片，可以让图片重复平铺横铺，或将图片作为对象背景固定在对象任何位置。 设置背景样式： 1. background-color: 设置颜色作为对象背景颜色； 2. background-image: 设置图片作为背景图片； 3. b...
CSS3背景渐变
JJ_Smilewang的博客
04-05 1万+
我们经常可以看到有些背景色并不是纯色，而是好看的渐变色，css3知我懂我，给我们提供了制作渐变背景色的属性。 渐变主要包括线性渐变和径向渐变，接下来逐一介绍用法： 1.线性渐变 线性渐变--linear gradients，表示颜色沿着一条直线过渡，比如从左到右，从右到左，从上到下等。 1.1 语法： background: linear-gradient(position , color1 ,color2, ....)； /* position 渐变方向，color1 第一种颜色 co
HTML如何让图片覆盖背景颜色,css – 使用rgba背景颜色覆盖背景图像
weixin_30895003的博客
06-04 1993
PeterVR的解决方案的缺点是，额外的颜色显示在整个HTML块的顶部 – 这意味着它也显示在div内容的顶部，而不仅仅是背景图像的顶部。这很好，如果你的div是空的，但如果它不使用线性渐变可能是一个更好的解决方案：Red text.the-div{background-image: url("the-image.png");color: #f00;margin: 10px;width: 200p...
css设置背景色渐变
最新发布
08-18
你可以使用CSS中的linear-gradient函数来设置背景色的渐变效果。linear-gradient函数可以接受多个颜色值，用于定义渐变色的起始点和终止点。你可以指定渐变的方向或角度，以及颜色的透明度。 例如，如果你想创建一...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值