css好看的背景颜色

2024-10-28

10 个独特的 CSS 背景视觉效果

这几年的web设计中,大背景的设计变得越来越流行.特别是在现在大屏大行其道的情况下,设计师在设计中越来越多的使用大分辨率的背景图来填充屏幕,这样更能制造独特的视觉效果,能更好的传达他们想要向用户传达的内容. 但是,大部分的设计仅仅是硬生生的把大背景图填充就了事了.其实,借助于CSS和JavaScript的力量,可以创建一些独特的视觉效果,可以使体验更加优雅. 下面就来陈列一些使用不同的CSS和JavaScript技术来创建的一些独特的带有大背景的视觉效果,当然也会对它们所使用的技术做一个简单的说

使用CSS如何悬停背景颜色变色 onmouseover、onmouseout

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

css 使用background背景实现border边框效果

css中,我们一般使用border给html元素设置边框,但也可以使用background背景来模拟css边框效果,本文章向大家介绍css 使用background背景实现border边框效果,需要的朋友可以参考一下. 有一个段落P元素,我们需要给这个段落的每一行添加border-top效果,下面来看一下如何使用background背景实现border边框效果,实例代码如下所示: <!DOCTYPE html> <html> <head> <style type=

div 背景色设置_DIV背景颜色设置

DIV 背景色设置篇-div背景颜色设置篇一.div标签内直接设置背景颜色 - TOP <div style="background:#000; color:#FFF">背景为黑色</div> DIV标签内设置背景色为黑色,字体颜色为白色 div标签内设置背景色截图通过div标签内设置style设置背景色等CSS样式. 二.外部css设置div背景色 - TOP 这里为一个对象CSS命名为".divcss5",通过建立外部

设置chrome浏览器背景颜色

经常看博客,页面背景都是白色的居多,看久了眼睛就不适合了,决定修改chrome浏览器背景颜色,保护下自己的眼睛, 下载chrome 插件Stylish并安装,安装成功后chrome右上角有它的图标,点击它再选择“管理已安装样式”,弹出管理页面,点击“写入新样式” 复制下面css代码保存背景颜色就变绿了 div {background-color:#C7EDCC !important;} table {background-color:#C7EDCC !important;} td {backgr

CSS初识- 选择器 &背景& 浮动& 盒子模型

# CSS初识-目标: > 1. 学会使用CSS选择器 > 2. 熟记CSS样式和外观属性 > 3. 熟练掌握CSS各种基础选择器 > 4. 熟练掌握CSS各种复合选择器 > 5. 熟练掌握CSS三种显示模式(inline.block.inline-block) > 6. 熟练掌握CSS背景属性 > 7. 熟练掌握CSS三大特性(层级性.继承性.优先性) > 8. 熟练掌握CSS盒子模型(border.padding.margin) > 9. 熟练掌握

利用CSS背景颜色属性使父级div背景透明同时避免子级标签透明。

实现背景色透明效果的代码实现各个浏览器中具备良好的透明特性的效果,IE中使用私有滤镜filter,高端浏览器使用CSS3中的rgba属性. 输入十六进制的颜色值以及透明度,自动在IE的过渡滤镜以及CSS3中的rgba属性之间进行十六进制与十进制的换算. 增加对IE9浏览器中的滤镜取消效果 ★ 鉴于需要做浏览器的hack,使用了:root来让IE9以前的浏览器不支持效果,所以增加了一个需要添加选择符类名的方式,对于这块需要大家在后期添加样式到代码中做单独的处理把CSS代码中的backgroun

兼容性背景颜色半透明CSS代码（不影响内部子元素）

如何简单兼容性的实现父元素是半透明背景色,而子元素不受影响. 兼容所有浏览器的背景颜色半透明CSS代码: background-color: rgba(, , , .); filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#,endColorStr=#); 注意:startColorStr 和 endColorStr 的值,前两位是十六进制的透明度,后面六位是十六进制的颜色. 其格式为 #AARRGGBB . AA

div+css总结—FF下div不设置高度背景颜色或外边框不能正常显示的解决方法（借鉴）

原地址:http://blog.sina.com.cn/s/blog_60b35e830100qwr2.html 在使用div+css进行网页布局时,如果外部div有背景颜色或者边框,而不设置其高度,在IE浏览器下显示正常.但是使用Firefox/opera浏览时却出现最外层Div的背景颜色和边框不起作用的问题. 大体结构 <div class="outer"> <div class="inner1"></div> <d

CSS实例：鼠标滑过超级链接文字时改变背景颜色

先讲简单的: 通过CSS可以设置超链接在不同时刻的颜色: <style> a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FFFF} /* 已访问的链接 */ a:hover {color: #0000FF} /* 鼠标移动到链接上 */ a:active {color: #00FF00} /* 选定的链接 */ </style> <ul id="content"> <li&g

CSS 背景颜色

颜色背景 CSS中背景颜色由background-color决定,这里的背景颜色会渲染padding和content,不会渲染border和margin部分. 在css3中可以通过background-clip来定义颜色的渲染区域:取值为content-box(仅渲染content部分),padding-box(渲染content和padding部分)和border-box(渲染content.padding): 测试过程发现padding-box和border-box渲染效果一样,不知为何有这

CSS背景颜色、背景图片、平铺、定位、固定

CSS背景颜色设置 background-color:red;如设置背景颜色为红色: 背景颜色设置支持3种写法: 颜色名 16进制 rgb CSS背景图片颜色设置 background-image:url(图片地址);如设置背景图片路径不在说明了! CSS背景图片平铺设置(如果不设置图片默认设置为x轴y轴同时平铺即值为repeat) background-repeat:repeat-x;如设置x轴平铺: background-repeat:no-repeat如设置不平铺: CSS背景图片定位设

css背景颜色、背景图片，以及列表的多种样式

背景样式 • background-color 设置元素的背景颜色.• background-image 把图像设置为背景.• background-position 设置背景图像的起始位置.• background-attachment 背景图像是否固定或者随着页面的其余部分滚动.• background-repeat 设置背景图像是否重复及如何重复.• background 简写属性,作用是将背景属性设置在一个声明中. 列表样式 • list-style-type 设置列表项标志的类型.•

CSS 之动态变换背景颜色

先上效果图 HTML代码: 123456789 <div class="header"> <h1>GCCHRN'S BLOG</h1> <ul class="nav nav-tabs"> <li role="presentation" class="active"><a href="#">首页</a></li>

神奇的 CSS，让文字智能适配背景颜色

最近几天,有好几个同学都问了同样一个问题. 页面上有一段文本,能否实现这段文本在不同背景色下展示不同的颜色?也就是俗称的智能变色.像是下面这样: 文本在黑色底色上表现为白色,在白色底色上表现为黑色.看似很复杂的一个效果,但是其实在 CSS 中非常好实现,今天就介绍这样一个小技巧,在 CSS 中,利用混合模式 mix-blend-mode: difference,让文字智能适配背景颜色. 混合模式 mix-blend-mode: difference CSS3 新增了一个很有意思的属性 -- mi

背景颜色 - bootStrap4常用CSS笔记

.bg-primary 重要的背景颜色 .bg-success 执行成功背景颜色 .bg-info 信息提示背景颜色 .bg-warning 警告背景颜色 .bg-danger 危险背景颜色 .bg-secondary 副标题背景颜色 .bg-dark 深灰背景颜色 .bg-light 浅灰背景颜色

css取消a标签在移动端点击时的背景颜色

一.取消a标签在移动端点击时的蓝色 -webkit-tap-highlight-color: rgba(255, 255, 255, 0);-webkit-user-select: none;-moz-user-focus: none;-moz-user-select: none; 二.使用图片作为a标签的点击按钮时,当触发touchstart的时候,往往会有一个灰色的背景 a,a:hover,a:active,a:visited,a:link,a:focus{ -webkit-tap-h

css消除已有的背景颜色

比如我们在第三方库的时候,样式会有你不喜欢的,就比如背景颜色.那么就要去除已有的背景颜色 background-color:transparent;

CSS设置浮动导致背景颜色设置无效的解决方法

float浮动会使父元素高度塌陷,父级元素不能被撑开,所以导致背景颜色不能被撑开解决方法: 对父元素设置高度对父元素设置 overflow:hidden清除浮动把父元素也设置为float浮动结束标签前加代码:<div style="clear:both"></div>

借助Html制作渐变的网页背景颜色

借助Html制作渐变的网页背景颜色 <html> <head> <title>制作渐变背景</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style type="text/css"> <!-- body{ background:blue; filter: Alp

css3动画之背景颜色的自动切换

因为不同浏览器内核的不同所以会产生浏览器兼容性问题 <!DOCTYPE html> <html> <head> <meta charset='utf-8'/> <title>背景颜色的变换</title> <style type="text/css"> div{ width: 200px; height: 200px; background: blue; animation:myfirst 5s; -m

css好看的背景颜色

热门专题