【CSS3之背景定位原点background-origin】的更多相关文章

CSS3之背景定位原点background-origin

背景定位原点background-origin是CSS3新添加的有关背景的属性,主要是改变背景起始的原点位置的.CSS3之背景定位原点background-origin的属性值有三个:border.padding和content.下面将围绕着三个属性值为大家介绍CSS3之背景定位原点background-origin. 一.background-origin的语法  1.background-origin的语法 background-origin: padding-box || border-b…

css3之背景定位

属性: background-position: left top || left bottom || right top || right bottom || center center || 像素值 || 百分比 实例: 代码:   1.设置background-position:left top 代表背景图片要放在内容区的左上角的位置(默认值) 2. 设置background-position: left; 将背景图片要放在内容区的左侧中间的位置 没有第二个参数则第二个参数默认为cente…

CSS3的背景background

CSS3中的Background属性 background: background-image || background-position/background-size || background-repeat || background-attachment || background-clip || background-origin || background-color 也可以分解写成: background-image: url(); background-position: <l…

CSS3总结二：（background）背景/渐变色函数

background-color(CSS2) background-image background-position background-size background-repeat background-attachment background-origin background-clip 一.背景渐变色(取值单位-图像) linear-gradient() ==>路径渐变 radial-gradient() ==>经向渐变 repeating-linear-gradient()==&…

[css 揭秘]：CSS揭秘 技巧（三）：背景定位

我的github地址:https://github.com/FannieGirl/ifannie 源码都在这上面哦! 喜欢的给我一个星吧 背景定位 问题:很多时候,我们想针对容器某个角对背景图片做便宜定位.个人觉得,背景定位应用还是很广的,在实践中经常遇到.在实践中才会发现它的美,真是强大. background-position的扩展语法方案 在css背景与边框中,background-position属性已经得到了扩展,它允许我们指定背景图片距离任意角的偏移量,只要我们在偏移量前面指定关键字…

20190328-CSS样式一：字体样式font-、文本样式text-、背景图样式background-

目录 CSS参考手册:http://css.doyoe.com/ 1.字体简写:font:font-style || font-variant || font-weight || font-size || /line-height || font-family 2.字体分样式 字体倾斜:font-style:"normal | italic | oblique": 小型大写字母:font-variant:"normal | small-caps | inherit"…

css3-background clip 和background origin

1.background-origin background-origin 里面有3个参数 : border-box | padding-box | content-box; border-box,padding-box,content-box从边框,还是内边距(默认值),或者是内容区域开始显示. 代码演示: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>…

css3 Gradient背景

css3的gradient分为两种:线性渐变(linear)和径向渐变(radial). 一.线性渐变linear-gradient 1.介绍 linear-gradient([设置方向],[设置开始颜色],[设置多种过度颜色],[设置结束颜色]) 参数: 第一个参数:指定渐变方向,可以用“角度”的关键字或“英文”来表示: 第一个参数默认:180deg,等同于“to bottom”. 后面的颜色至少有2个,即开始颜色和结束颜色. 2.使用 a.举例: <style type="text/c…

CSS3之背景剪裁Background-clip

CSS3之背景剪裁Background-clip是CSS3中新添加的内容.这个属性还是比较简单的,主要分五个属性值:border.padding.content.no-clip和text.下面将针对这五个属性值为大家介绍CSS3之背景剪裁Background-clip. 一.Background-clip的语法 1.Background-clip的语法 background-clip: border-box || padding-box || context-box || no-clip ||…

[css]《css揭秘》学习（三）-灵活的背景定位

一.background-position属性 使用该属性,在不确定容器大小的情况下,也可以指定图案距离容器边缘的位置:但是需要为不支持该属性的浏览器指定回退方案,否则,图案会默认放在左上角. <html> <head> <meta charset="utf-8"> <title>灵活的背景定位</title> <style type="text/css"> div{ background:ur…

移动开发之css3实现背景几种渐变效果

移动端背景渐变,非常的年轻,符合90后年轻一代的审美,css3的这个渐变目前主要是应用在手机前端领域. 产品设计中使用渐变色的好处:1:观众不至于眼睛过于疲劳(如果是浅色背景,3个小时下来极容易造成观众闭上眼睛还有残影,眼睛会极度疲劳).2:优雅而低调的深浅色调:3:纯色单调 渐变色一是色彩不单调 二是在有限空间内尽可能制造空间感4:稍微加点渐变可以让纯色层显得更细腻,不那么单调.画面显得更丰富.代码如下,非常简单 新的梯度渐变语法,新的语法包含四个渐变函数: linear-gradient()…

css背景定位

日期:2015-12-05 背景定位算是才弄明白: background-position:50% 50%; 图片水平和垂直居中.与 background-position:center center;效果等同. 等同于x:{容器(container)的宽度—背景图片的宽度}*x百分比,超出的部分隐藏.等同于y:{容器(container)的高度—背景图片的高度}*y百分比,超出的部分隐藏.…

基于CSS3动态背景登录框代码

基于CSS3动态背景登录框代码.这是一款基于jQuery+CSS3实现的带有动画效果的动态背景登陆框特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="htmleaf-container"> <div class="wrapper"> <div class="container"> <h1>Welcome</h1> <form clas…

CSS3透明背景+渐变样式

CSS3透明背景+渐变样式 转载自博文:<CSS3透明背景+渐变样式> http://blog.csdn.net/netbug_nb/article/details/44343809 效果: 核心代码如下: .map-interview { background-image:-webkit-linear-gradient( to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 5%, rgba(0,0,0,0.6) 10%, rgba(0,0,0,0.6) 9…

css3之背景属性之background-size

一.相关属性: background-image: url(“./img/a.jpg”); //设置元素背景图片 background-repeat: repeat/no-repeat: //设置背景图像的平铺方式 默认repeat background-position:left top; //设置元素的背景定位起点,默认值为left top background-size:auto; //设置背景图像的尺寸大小,默认值auto background-attachment:scroll: //…

笔记《精通css》第4章 背景图像，平铺方式，背景定位，圆角框，投影，不透明

第4章  背景图像,平铺方式,背景定位,圆角框,投影,不透明 1.背景图像 background-image:url() 2.平铺方式 background-repeat:repeat-x repeat-y no-repeat 3.背景定位 padding-left: background-position:left cent  /0  50% background-color: 4.圆角框 border-radius:1em   要加前缀 border-image:url()  10% 10%…

css3实现背景颜色渐变，文字颜色渐变，边框颜色渐变

css3的渐变可以使用2个或者多个指定的颜色之间显示平稳的过渡的效果.这篇文章主要介绍下css3实现背景颜色渐变,文字颜色渐变,边框颜色渐变的方法,以便大家学习参考! 1.css背景颜色渐变 代码: <style> .content_bg{ width:600px;max-width: 100%;margin: auto; height:150px; line-height:150px; text-align:center; font-size:32px;color:#fff; backgro…

position 的值absolute、fixed、relative和static的定位原点是什么

position 的值absolute.fixed.relative和static的定位原点是什么 absolute 成绝对定位的元素,相对于值不为static的第一个父元素进行定位,也可以理解为离自己这一级元素最近的一级position设置为absolute或者relative的父元素的左上角为原点. fixed(老IE不支持) 生成绝对定位的元素,相对于浏览器窗口进行定位. relative 生成相对定位的元素,相对于其元素本身所在正常位置进行定位. static 默认值,没有定位,元素出现…

关于css3的背景切割（background-clip）、背景原点（background-origin）的使用

一.背景切割   background-clip :border-box | padding-box | content-box   作用:为将背景图片做适当的裁剪,以适应需要.   默认格式 background-clip :border-box,border的区域也有背景图,但是背景图图片是从border-top和border-left的位置开始平铺的,所以当背景图片no-repeat的时候,border-top和border-left的背景是背景色不是背景图,只有当背景repeat的时候,…

CSS3背景定位 background-origin

background-size 大小 语法 background-size :[ <length> | <percentage> | auto ]{1,2} | cover | contain <length>: 由浮点数字和单位标识符组成的长度值.不可为负值. <percentage>: 取值为0%到100%之间的值.不可为负值. background-origin 定位 语法 background-origin : border-box 从border区…

如何通过CSS3实现背景图片色彩的梯度渐变

随着网站的越来越普及,CSS3和HTML5必将成为网站前端发展的主流方向,特别是在移动端,高端浏览器给前端工程师们带来了无以言表的体验. 通俗的来讲,CSS3可以说是CSS技术的升级版本,CSS3语言开发是朝着模块化发展的.以前的规范作为一个模块实在是太庞大而且比较复杂,所以,把它分解为一些小的模块,更多新的模块也被加入进来.这些模块包括:盒子模型.列表模块.超链接方式 .语言模块 .背景和边框 .文字特效 .多栏布局等.那么,今天我首先要在马海祥博客上跟大家分享的就是CSS3的Gradient…

CSS3实现背景透明文字不透明

最近遇到一个需求,如下图,input框要有透明效果 首先想到的方法是CSS3的 opacity属性,但事实证明我想的太简单了 这个属性虽然让input框有透明效果,同时文字和字体图标也会有透明效果,导致文字和字体图标被模糊,如下图 于是我开始思考其它方式,最后想到了通过透明背景图来实现 背景图虽然能够解决问题,但会造成空div,并且还需要设置定位 感觉把简单的事情变得复杂了,我始终认为有更简单的方法 最后终于被我找到了完美解决的方法——用CSS3的 rgba 来设置 background-col…

CSS3 的背景属性

㈠background-size 属性 ⑴background-size 属性规定背景图片的尺寸. ⑵在 CSS3 之前,背景图片的尺寸是由图片的实际尺寸决定的.在 CSS3 中,可以规定背景图片的尺寸,这就允许在不同的环境中重复使用背景图片. ⑶能以像素或百分比规定尺寸.如果以百分比规定尺寸,那么尺寸相对于父元素的宽度和高度. ⑷语法:background-size: length|percentage|cover|contain;  ⑸示例1:调整背景图片的大小 <!DOCTYPE html…

关于css3的背景渐变

关于css3的渐变,目前各大浏览器还未做到很好的支持,所以需要在我们使用时加上各大浏览器前缀. -moz-:使用Mozilla内核的浏览器(Firefox浏览器) -webkit-:使用Webkit内核的浏览器(Chrome,Safari浏览器) -o-:使用Opera内核的浏览器(Opera浏览器) 这里对IE不做过多介绍,对于本文背景颜色的渐变,也没有考虑IE 一.线性渐变(linear-gradient) 1.语法:-moz-linear-gradient(<point>/<ang…

css3的背景颜色渐变@线性渐变

背景颜色渐变之线性渐变 语法形式: firefox浏览器 background:-moz-linear-gradient(position/deg,startColor,endColor); opera浏览器    background: -o-linear-gradient(position/deg,startColor,endColor); safari和chrome浏览器    background: -webkit-linear-gradient(position/deg,startCo…

css3之背景新属性

background属性 属性 描述 background-origin 背景图片的定位区域 background-size 背景图片尺寸 background-image:url(),url();允许多个背景图片…

用CSS3实现背景的固定

今天放假了,正好最近养成了没事泡泡博客园的习惯,自己也有了博客..不得不吐槽一下博客园为什么页面这么古朴,,带的几个模版也没啥意思,反正不符合我口味,幸亏后台提供了编辑CSS的功能,于是我就搬来现有的模板自己改了改CSS,当加背景时遇到了一点问题,背景内容一多拉滚动条背景也跟着跑,并且背景也没有拉伸到整个页面,几经摸索,终于找到了解决办法,用CSS3的background-size.background-attrachment.background-repeat即可实现 body{ backgr…

CSS3实现背景颜色渐变

CSS3渐变色生成网站:http://gradients.glrzad.com/ 本文参考:前端设计之用CSS3做线性渐变效果http://webskys.com/css3/10.html 在CSS3出来以前,想要显示一个渐变的效果,必须要专门制作一个图片. CSS3的出现,使得渐变色得以简单的实现.由于不是所有的浏览器都支持CSS3,所以不是所有的浏览器都能够显现出渐变的效果来. 目前,Mozilla内核的(Firefox)和webkit内核的(Safari/Chrome)浏览器支持这一属性.…

CSS3：背景

细节注意 盒子:border-box | padding-box | content-box用于background-origin背景的开始和background-clip的剪切位置. 渐变也是生成一张图片相当url(),可以在前面或者后面加 repeat background-size其他等 多层背景,最后加背景颜色哦,当然其他也能加,但是前面加的就覆盖最后的了. 例子:240px 120px/100% 200px,这里面的背景开始位置position/背景尺寸size都是x和y方向,可以负值…

CSS 3. 文本|字体|背景|定位

1.文本属性和字体属性 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> div{ width:400px; height: 300px; /*background-color: red;*/ bor…