【第17章CSS边框与背景[下]-水之原】教程文章相关的互联网学习教程文章

CSS3渐变背景色使用方法兼容IE9+【图】

背景色,除了纯色以外,还能够使用多种颜色组合成为渐变背景色,使页面丰富。渐变背景分为两种:1、线性渐变;2、环形渐变; 线性渐变线性渐变分为:横向、纵向、对角渐变三种渐变语法:<linear-gradient> = linear-gradient([ [ <angle>| to <aside-or-corner> ] ,]? <color-stop>[, <color-stop>]+)<side-or-corner> = [left | right] || [top | bottom]<color-stop> = <color> [ <length> | <percentage> ]?<angle>:用角度值指...

web前端入门到实战:css 中的背景图片小技巧和存在的坑

body 的背景图设置第一种 :这种情况下背景图片可以缩放 但是不能完全等比缩放background: url(imgs/1.jpg)no-repeat;background-position:center 0; 背景图的定位原点,由于body高不确定background-attachment:fixed; 背景图片保持固定,不会随页面滚动而滚动第二种: 这种情况下的背景图会完全的等比缩放, 随着窗口大小改变首先给html 设置 height:100%;给body设置background: url(imgs/1.jpg) no-repeat;background-size: 100% 100%...

CSS3实现动态背景登录框的代码_表单特效【图】

基于CSS3动态背景登录框代码。这是一款基于jQuery+CSS3实现的带有动画效果的动态背景登陆框特效。效果图如下:实现的代码如下: html代码:Welcome$('#login-button').click(function (event) {event.preventDefault();$('form').fadeOut(500);$('.wrapper').addClass('form-success');});本文介绍的这款基于jQuery+CSS3实现的带有动画效果的动态背景登陆框特效,希望大家可以喜欢。

CSS直方图布局示例_页面背景

CSS直方图示例 .chart { font-family: Tahoma; font-size: 12px; border: 1px solid #ccc; float: left; margin: 0; padding: .4em .1em; } .chart li { list-style: none; float: left; width: 5em; text-align: center; background: url(/upload/2009-11/20091104144827988.gif) center 1.6em no-repeat; } .chart li span { display: block; text-indent: -999em; padding-bottom: 90px; background: url(/upload/2009-11/200...

html学习教程6之背景-颜色_html/css_WEB-ITnose

在HTML中搭配一个好的背景能够让观众更加易于阅读。 背景(Backgrounds) 拥有两个配置背景的标签。背景可以是颜色或者图像。 背景颜色(Bgcolor) 背景颜色属性将背景设置为某种颜色。属性值可以是十六进制数、RGB 值或颜色名 这三种方式都是把背景颜色设置为黑色 其中第三种设置背景颜色的方法在HTML4.0中只是支持16 种颜色名 它们是:aqua, black, blue, fuchsia, gray, green, lime, maroon,...

真正了解CSS3背景下的@fontface规则

很多人只要一提到@font face规则,心中就会不由自主“哦~~”的一声:“这个我知道,可以用来生成自定义字符小图标!”话是没错,问题在于很多人就以为生成字符小图标就是@font face规则的全部,实际上只是功能之一,如果真正了解@font face规则,你会发现,@font face规则可以做的事情其实非常多,尤其我们不考虑IE7,IE8浏览器的情况下。一、 @font face的本质是变量虽然说CSS3新世界才出现真正意义上的变量var(参见此文:“了解...

CSS实现动态气泡背景代码分享【图】

本文主要和大家介绍了CSS 动画实现动态气泡背景的方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。今天的第一个任务是写个登录页面,老大给了我一个参(chao)考(xi)案例,大家点击链接就能看到。嗯,这个登录页面确实很简洁、大方,尤其是它的气泡背景,第一反应这应该是张动态图片,打开审查元素才发现原来这是用代码写的,一下子激起了宝宝的好奇心,所以也试着写...

CSS3实现动态背景登录框的代码【图】

基于CSS3动态背景登录框代码。这是一款基于jQuery+CSS3实现的带有动画效果的动态背景登陆框特效。效果图如下:实现的代码如下: html代码:<div class="htmleaf-container"><div class="wrapper"><div class="container"><h1>Welcome</h1><form class="form"><input type="text" placeholder="Username"><input type="password" placeholder="Password"><button type="submit" id="login-button">Login</button></form></div><ul c...

实现多背景模拟动态边框【图】

这次给大家带来实现多背景模拟动态边框,实现多背景模拟动态边框的注意事项有哪些,下面就是实战案例,一起来看一下。首先来看看要实现的效果图实现方法如下我首先想到的是border属性,可是border属性不能设置长度。如果用border实现,需要用其他元素来模拟,比较麻烦。后来突然想起以前在网上看到有人用CSS3的多背景来模拟边框,就试了一下。css3 背景CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了...

css3背景颜色渐变属性兼容性测试基础环境为:windows系统;IE6.0+,Firefox4.0+,Chrome4.0+,Safari4.0+,Opera15.0+-花溪立【图】

css3背景颜色渐变属性 兼容性测试基础环境为:windows系统;IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+ 语法:<linear-gradient>:linear-gradient([ ,]? <color-stop>[, <color-stop>]+); :[ left | right ]? [ top | bottom ]? || ? <color-stop>: [ | ]? 取值:left:设置左边为渐变起点的横坐标值。right:设置右边为渐变起点的横坐标值。top:设置顶部为渐变起点的纵坐标值。bottom:设置底部为渐变起点的...

分享CSS3条纹背景制作的实战教程【图】

这篇文章主要介绍了分享CSS3条纹背景制作的实战教程,根据Forefox浏览器和webkit内核的浏览器两种情况来分别讲解,需要的朋友可以参考下mozilla内核浏览器制作background背景渐变1、制作一个简单的橫条纹渐变背景-mozilla内核的浏览器css样式:body { background-color: #aaa; background-image:-moz-linear-gradient(#000 25%,#fc0 80%); background-size: 50px 50px; }以火狐为代表,显示效果如下:改变background-size的...

css如何设置背景颜色透明?css设置背景颜色透明度的两种方法介绍【图】

在网页布局中有时为了网页的整体美观,可能需要将网页中的某些部分设置为背景颜色透明,那么如何设置背景颜色透明呢?本篇文章就来给大家介绍一下css设置背景颜色透明的方法。在css中设置背景颜色透明的方法有两种:一种是通过rgba方式设置,另一种是通过backgroud和opacity设置。下面我们就来分别看看css中这两种方法实现背景颜色透明的具体实例1、通过backgroud和opacity设置背景颜色透明background属性中属性值比较简单,这里就...

用CSS实现背景图片透明而文字不透明的两种方法【图】

这篇文章主要介绍了CSS实现背景图片透明而文字不透明效果的两种方法,需要的朋友可以参考下摘要: 方法一(毛玻璃效果):背景图 + 伪类 + flite:blur(3px)方法二(半透明效果):背景图 + 定位 + background:rgba(255,255,255,0.3)CSS实现背景图片透明,文字不透明效果的两种方法项目中经常会用到背景图上放一些文字介绍,这里介绍两种技术来实现背景图片透明,文字不透明效果,记录一下,方便日后学习。1.毛玻璃效果:背景图 + 伪类 + ...

关于css中背景图片的实例详解

body 的背景图设置 第一种 :这种情况下背景图片可以缩放 但是不能完全等比缩放background: url(imgs/1.jpg)no-repeat;background-position:center 0; 背景图的定位原点,由于body高不确定background-attachment:fixed; 背景图片保持固定,不会随页面滚动而滚动第二种: 这种情况下的背景图会完全的等比缩放, 随着窗口大小改变首先给html 设置 height:100%;给body设置 background: url(imgs/1.jpg) no-repeat;background-size: 100...

css背景图片拉伸至100%满屏显示怎么设置

现在css的使用对很多用户来说也是比较重要的,使用能很好的对图片进行拉伸,不留痕迹,本篇文章给大家分享的就是关于css背景图片拉伸至100% 满屏显示怎么设置,有需要的朋友可以参考一下。现在css的使用对很多用户来说也是比较重要的,使用能很好的对图片进行拉伸,不留痕迹。那么我们使用css时候,背景图片拉伸至100% 满屏显示应该怎么操作?具体代码是什么?如何用css背景图片拉伸至100% 满屏显示呢?这个问题听起来似乎很简单。...