文档章节

CSS揭秘—灵活的背景图(三)

o
 osc_gu9d45li
发布于 2019/04/10 13:31
字数 532
阅读 9
收藏 0

精选30+云产品,助力企业轻松上云!>>>

 

  前言:

    所有实例均来自《CSS揭秘》,该书以平时遇到的疑难杂症为引,提供解决方法,只能说秒极了,再一次刷新了我对CSS的认知

   该书只提供了关键CSS代码,虽然有在线示例代码链接,但访问速度较慢。下面示例代码是我自己写的,若有错误,欢迎指正

   注:我会在最开头附上每个相关示例所需CSS属性链接作为补充,以供查阅和学习

     我会在每个示例最后附上书中提供的在线示例代码链接;

     我会从书中选择一些css技巧来分享,有兴趣的小伙伴可以去看看这本书,你不会失望的

 

 

  CSS需知:

    background-position

 

 

  场景:

     现在有一个需求让你把下图箭头所指的背景图片放到右下角的位置,你会怎么办呢?如下图

     

 

     可能聪明的你马上会想到用 background-position:right bottom; 属性

     补充:background-position:0 0 或 0% 0% 表示把背景图片设置到左上角,100% 100% 表示右下角;

        如果只设置其中一个值,另一个值则默认是50%(相当于设置为center);默认值为 0% 0%

    

    

     这样虽然能解决问题,但需求变成让你把该背景图片向右边缘且跟底边偏移 20px,是否会让你觉得有些头痛呢,如下图

     

 

 

 

   background-position扩展语法方案: 

    它允许我们指定背景图片距离任意角的偏移量,只要我们在偏移量前面指定关键字

     

     

    

    解决方法:

     如果想让背景图片跟右边缘保持 20px 的偏移量,同时跟底边也保持 20px 的偏移量,

     我们只需要根据 background-position扩展语法即可,如下

    background-position: right 20px bottom 20px;

 

 

 

  DEMO

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
          section {
              margin: 0 auto;
              width: 400px;
              height: 200px;
              padding: 10px;
              color: #fff;
              font-size: 24px;
              background: url(http://csssecrets.io/images/code-pirate.svg) no-repeat right bottom #58a;
              background-position: right 20px bottom 20px;
          }
        </style>
    </head>

    <body>
        <section>Code Pirate</section>
    </body>

</html>

 

 

 

  书中在线实例链接:http://dabblet.com/gist/0f226e63595d1bef88cb

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
CSS揭秘—透明边框(一)

  前言:     所有实例均来自《CSS揭秘》,该书以平时遇到的疑难杂症为引,提供解决方法,只能说秒极了,再一次刷新了我对CSS的认知    该书只提供了关键CSS代码,虽然有在线示例代...

osc_pw27dksr
2019/04/10
1
0
CSS揭秘(二)背景与边框

Chapter2 背景与边框 1. 半透明边框 基础:了解 RGBA & HSLA 颜色(色调 0~360、饱和度、亮度 (0%黑色~100%白色)、透明度) 默认情况下,背景在边框的下层,容器的背景从半透明的边框透上来...

osc_kf729ara
2018/03/25
0
0
03--css形状--css揭秘

形状 一 自适应的椭圆 1.难题 1> 圆 你可能注意到过, 给任何正方形元素设置一个足够大的border-radius, 就可以把它变成一个圆形。所用到的CSS 代码如下所示: 1 #bd {2 width: 200px;3 he...

osc_grdodi9l
2018/02/07
2
0
css3新特性

2-1语法 栗子1 栗子2 上面栗子是简写模式,也可以分开写各个属性(这个在下面就不再重复了) 2-2实例-hover效果 上面两个按钮,第一个使用了过渡,第二个没有使用过渡,大家可以看到当中的区...

osc_sq3qw4di
2018/06/06
2
0
Bootstrap学习总结

Bootstrap学习总结 @TOC Bootstrap介绍 什么是bootstrap? Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。 特点就是灵活简洁,代码优雅,美观...

osc_6nds72mv
04/16
1
0

没有更多内容

加载失败,请刷新页面

加载更多

eclipse汉化教程(附安装包)

eclipse汉化包安装步骤 一、去官网或者在本站下载Eclipse(不管是什么版,中文设置的方法都是差不多的,所以说我们汉化的教程不管未来更新多少个版本都是一样的) 官方下载地址:www.eclipse.o...

树懒宝宝
26分钟前
22
0
CocosCreator之分层管理的ListView

前言 进入公众号回复listview即可获得demo的git地址。 之前写的一篇文章《Creator之ScrollView那些事》中提到了官方Demo中提供的ListViewCtl,只是实现了纵向滑动,没有实现横向滑动。并且建议...

陈广文
30分钟前
24
0
在CSS Flexbox中,为什么没有“ justify-items”和“ justify-self”属性?

问题: Consider the main axis and cross axis of a flex container: 考虑伸缩容器的主轴和横轴: Source: W3C 资料来源: W3C To align flex items along the main axis there is one pro......

法国红酒甜
31分钟前
17
0
搜索解决方案 - ElasticSearch/Solr/Lucene

搜索解决方案 - ElasticSearch/Solr/Lucene 1. 什么是 ElasticSearch ElasticSearch 是一个基于 Lucene 的搜素服务器 是一个分布式、高扩展、实时的搜素与数据分析引擎 基于 RESTful web 接口...

夙梦o
35分钟前
26
0
设计模式学习笔记(五):工厂方法模式

1 前言 尽管简单工厂模式实现了对象的创建和使用分离,但是仍然存在以下两个问题: 工厂类过于庞大,包含了大量的判断代码,导致维护和测试难度增大 系统扩展不灵活,如果增加了新的产品类型...

氷泠
38分钟前
21
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部