2014辛星在读CSS第八节 使用背景图片
这应该是系统CSS本教程的最后一节,为什么,由于本节。我觉得基础已经完成,接下来的就是无休止的战斗,战斗非常难用知识讲出来,通过积累,战斗经验。这些都不是说出来。
伟大,下来说一下用CSS加入背景图片的方式把。它在background属性中指定,能够用url(”图片路径")的方式来指定背景图片,假设是repeat,则图片在横向和纵向上平铺。假设是no-repeat,则背景图像不会平铺,仅仅显示一次,假设是repeat-x。那么就在水平方向平铺。假设是repeat-y,则在竖直方向平铺。
以下我们举个样例把,首先是HTML代码,例如以下图:
<html>
<head>
<link rel="stylesheet" type="text/css" href="my.css">
</head>
<div id = "bg"> 也许在互联网行业里,还没多少人会注意我这样的无名小卒,大家所津津乐道的都是像马云、马化腾、李彦宏啦,对他们的一举一动都十分关心。诚然,古之成大事者,不惟有超世之才,亦必有坚韧不拔之志,苏轼老前辈说的不错。马云,足够的坚持让他成为了中国的电商老大哥。李彦宏则是纯粹的科技流了,再加上早先的在搜索公司工作的经验,使得他一回国就带上了一层光环。马化腾,素来以抄袭著称的boss级人物,我是真的佩服。能抄到这样的地步,也真的非常有一套。 也许在互联网行业里,还没多少人会注意我这样的无名小卒,大家所津津乐道的都是像马云、马化腾、李彦宏啦,对他们的一举一动都十分关心。诚然,古之成大事者,不惟有超世之才,亦必有坚韧不拔之志,苏轼老前辈说的不错。马云,足够的坚持让他成为了中国的电商老大哥。李彦宏则是纯粹的科技流了。再加上早先的在搜索公司工作的经验。使得他一回国就带上了一层光环,马化腾,素来以抄袭著称的boss级人物,我是真的佩服。能抄到这样的地步,也真的非常有一套。 </div> </html>
然后是css代码,我们书写例如以下:
#bg{
color:#FFF;
background: url("2.jpg");
height: 900px;
}
这里我们要保证在同一个文件夹下有2.jpg这个图片才行,它的默认方式是在横向和纵向都是反复的,截图例如以下:
那么假设我们仅仅想在竖直方向反复呢,即在水平方向不反复呢?看以下代码:
#bg{
color: #FFF;
background: url("22.jpg") repeat-y;
height: 900px;
}
它的效果是这样滴:
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveGluZ3VpbWVuZw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">
图片背景方面的知识就先介绍这是第一次写,一时间未能像一点点,因此,修复后。
版权声明:本文博客原创文章,博客,未经同意,不得转载。
2014辛星在读CSS第八节 使用背景图片的更多相关文章
- 2014年最新的辛星html、css教程打包公布了,免积分,纯PDF(还有PHP奥)
首先说一下,这个教程是我的全部的博客的精华,我整理了两天之后才做出的这个pdf文档,累死我了,以下免积分给大家,希望大家可以不吝指正,提出它的一些不足什么的,谢谢啦: 以下就是它的下载地址了:2014 ...
- css网页中设置背景图片的方法详解
在css代码中设置背景图片的方法,包括背景图片.背景重复.背景固定.背景定位等 用css设置网页中的背景图片,主要有如下几个属性: 1,背景颜色 {">说明:参数取值和颜色属性一样 ...
- 2014年度辛星html教程夏季版第八节
经过前面七节的学习,我感觉大家的HTML的功底也差不多了,而且我特别的删去了某些东西,比如框架,如果回到几年前,那么框架是非常流行的,但是现在都到了2014年了,这些东西早就该被遗忘了,因此,我果断的 ...
- 2014年辛星全然解读html第八节
经过前面七节的学习,我感觉大家的HTML的功底也差点儿相同了,并且我特别的删去了某些东西,比方框架,假设回到几年前,那么框架是很流行的,可是如今都到了2014年了,这些东西早就该被遗忘了,因此,我果断 ...
- 2014年辛星完全解读Javascript第八节 json
json是JavaScript Object Notation的简写,它是一种轻量级的数据交换格式,而且表达上很容易靠字面去理解.json是用于存储和传输数据的格式,通常用于向服务器端传递数据. ** ...
- 跟着辛星一起用CSS美化商品列表
说实话,近期对CSS的关注还是蛮多的,不为别的,仅仅是由于自己喜欢,感觉写CSS就像画家绘画一样,使用热情和激情去探索,没有了那份功利心,反而感觉是一种享受.特别有成就感,好啦,今天就分享一期自己用C ...
- 【CSS学习笔记】背景图片
直接看代码: background: blue; /*页面背景为蓝色,很简单的代码*/background-image:url(small.jpg); /*页面背景是名字叫small.jpg的图片*/ ...
- CSS background-color 、image 背景图片
背景颜色 background-color 语法: background-color:<color> 默认值:transparent 透明 适用于:所有元素 继承性:无 动画性:是 计算 ...
- CSS hack前传——背景图片全屏
在之前的博客CSS hack中我有提到,一个问题的解决让我对CSS hack的态度从不屑一顾,到认真研究了实验一下,事情是这样的,最近产品发布,向来狂妄的我被一个bug纠缠住了,甚至丧气的表示我做不出 ...
随机推荐
- js获取图片的尺寸
$("<img/>").attr("src", "http://www.example.com/images/bag001.jpg&quo ...
- (十四)RabbitMQ消息队列-启用SSL安全通讯
原文:(十四)RabbitMQ消息队列-启用SSL安全通讯 如果RabbitMQ服务在内网中,只有内网的应用连接,我们认为这些连接都是安全的,但是个别情况我们需要让RabbitMQ对外提供服务.这种情 ...
- JavaEE 技术选型建议,server配置,部署策略
基础设施环境 # 总体採用 centos6.5 + nginx + tomcat7.0 负载均衡:nginx 配置,使用 nginx 作为负载均衡.权重配置. 在web层做到水平扩展. 以及配置日志格 ...
- [TypeScript] Understand lookup types in TypeScript
Lookup types, introduced in TypeScript 2.1, allow us to dynamically create types based on the proper ...
- Java虚拟机解析篇之---内存模型
今天闲来无事来,看一下Java中的内存模型和垃圾回收机制的原理.关于这个方面的知识,网上已经有非常多现成的资料能够供我们參考,可是知识还是比較杂的,在这部分知识点中有一本书不得不推荐:<深入理解 ...
- pandas 时间序列分析(一)—— 基础
0. 以时间作为序列的索引 >> from datetime import datetime >> dates = [datetime(2011, 1, i) for i in ...
- ArcGIS Engine 编辑- ITask
转自原文ArcGIS Engine 编辑- ITask 下面的代码是我们定制的一个工作流-给等高线赋值 namespace EngineApplication { [Guid("5b0c06 ...
- js如何动态创建表格(两种方法)
js如何动态创建表格(两种方法) 一.总结 一句话总结: 1.方法一:写好创建表格的html代码,将之赋值给div的innerHTML. 2.方法二.直接用创建好的table元素的方法insertRo ...
- xCode中怎样保存自己的代码块
在开发iOS的过程中.xCode肯定是用得最多的工具.没有之中的一个.由于苹果官方提供的就这一个平台,尽管没有竞争对手,但秉承苹果一贯的注重细节的原则,xCode还是一款相当不错的IDE. 作为一名i ...
- iOS 直播
待解决: 貌似苹果规定10M以内的视频可以用RTMP,以上的必须用HLS ? IOS非直播超过10分钟只能用hls,ios上有规定? 待尝试: 用Vitamion内核开发的可以自定义界面的视频播放器 ...