CSS3background新增属性

1. background-size

background-size: cover || contain.
该属性可以是背景图片铺满容器,前者适用于当背景图片原始尺寸小于容器大小,后者适用于图片尺寸大于容器。

2. background-clip

  取值 : border-box || padding-box || content-box

需要注意的是 background在Box
Model中,他是布满整个元素的Box区域的,并不是从padding内部开始,只不过边框部分遮住了部分background;backgground-color是从左border的左上角到右侧border的右下角,而background-image则是从左侧padding
   
  的左上角到右侧border的右下角。,而webkit下background-clip还有一个更神奇的效果,就是可以让图片填充文本,那就是background-clip:text配合其私有属性-webkit-text-fill-color

在前面的基础上,我们把样式换一下

   .text {
font-size: 40px;
text-transform: uppercase;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

效果:

3. background-orgin

决定背景图片的起始点。

如果background-attachment为fixed的话,background-orign将不会起作用。

时间: 2024-10-07 04:11:36

CSS3background新增属性的相关文章

H5新增属性02

H5智能表单 input 新增 type值 email 若输入的样式不和邮箱一样则报错 url 必须输入url地址(加http://) number 只能输入数字 属性:min max step value(默认值) range 取值范围 属性:min max step value(默认值) tel search 效果和text一样,专用于搜索框 属性:result color 调出取色板 date:选取日月年 month:选取月年 week:选取周年 time:选取时间,小时和分钟 datet

HTML5 学习笔记(二)——HTML5新增属性与表单元素

目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placeholder占位属性 1.7.required必填属性 1.8.pattern正则属性 1.9.autofocus自动聚焦属性 1.10.autocomplete自动完成属性 1.11.novalidate不验证属性 1.12.multiple多选属性 二.HTML5表单新功能解析 2.1.表单结构更自由

HTML5新增属性,新增元素

新增属性: contentEditable.designMode.hidden.spellcheck; 新增元素: 文档元素 <articl>:独立的文章 <section>:对页面内容分块 <nav>:定义页面上的导航条 <aside>:当前页面或文章的附属信息 <header>:<articl>中的标题 <footer>: <figure>:代表一个图片区域,包含<figcaption>元素,表

CSS3的新增属性及其用法

CSS3的新增属性及其用法 现如今,随着 Web2.0 技术的流行,之前的 CSS2 标准和相关技术似乎已经满足不了日益增长的开发需求:人们需要实现更加美观.用户体验更好的界面.CSS3,这个新一代的标准应运而生.为了满足现有的对于 Web UI 的开发需求,它提供了一系列强大的功能,如许多新的 CSS 属性(文字,布局,颜色等等),各种 CSS 特效,甚至还支持 CSS 动画.元素的变换.这些 CSS 新特性在现阶段可以说都是非常强大和完善的,您只需要加入几行简单的 CSS 代码便可以实现出一

HTML5 学习总结(二)——HTML5新增属性与表单元素

一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="div1" style="height:900px; backgrou

HTML5 Web Form 新增属性和表单验证

<form>标签的基本属性 1 method属性:指定浏览器向服务器传送数据的方式,可选: 2 action属性:设置服务器接受和处理表单数据的URL: 3 enctype属性:制定表单数据在发送到服务器之前进行编码的编码方式: 4 accept属性:指定能够通过文件上传进行提交的文件类型: 5 accept-charset属性:指定服务器处理表单数据所接收的字符集: 6 target属性:制定浏览器在提交表单后生成的页面在哪个框加载或在哪个窗口显示: 7 id属性:用来识别网页中的form标

CSS3新增属性text-overflow(省略符)实战开发详解

有人会问,为什么我把text-overflow拿出来单独讲解.以前,当一行内容显示不完整的时候,想要显示省略符,需要通过javascript等手段. 但是CSS3引入了text-overflow省略符属性,只需要短短一行代码就可以实现,开发方式的简洁强大不言而喻. 这篇文章,我讲带领大家做一个<今日头条>新闻导航列表,带领大家领略text-overfow的强大魅力.先看一下效果: 好了,看完了效果,现在正式开始今天的开发旅程吧! 首先我们先创建html页面,代码如下所示(红色文字即是我们Dem

CSS3新增属性text-shadow详解及燃烧的字体实战开发

今天我们有很多程序员在给文本设置样式时,都感觉无从下手.一般有两种情况: 1) 不知道关于文本到底有哪些样式属性: 2) 即使借助开发工具的自动提醒,依然不清楚样式属性的具体意思,以及具体用法. 今天这篇文章,我将带领大家一起来领受CSS3在文本样式应用方面的超强能力.通过精彩的实例,来使大家重新认识CSS3文本样式,真心希望大家通过此篇文章,即使不能做到精通CSS3的文本样式的应用,也会做到熟练应用. 实例: 如何利用CSS3制作燃烧的字体? 以前,如果我们网页上想要显示一个燃烧着的文本,大家

HTML5 INPUT新增属性

HTML5的input标签新增了很多属性,也是让大家非常兴奋的一件事,用简单的一个属性搞定以前复杂的JS验证.input新增的这些属性,使得html和js的分工更明确了,使用起来十分舒畅.我们先看下input新增了的属性:新增属性一:autoconmpleteautoconmplete可以赋值为 on 或者 off.当为 on的时候,浏览器能自动存储用户输入的内容.当用户返回到曾经填写过值的页面的时候,浏览器能把用户写过的值自动填写在相应的input框里.现在很多网站都实现了这个功能,不过基本都