CSS学习笔记：以图片作背景显示文字

hello，大家好，我是wangzirui32，今天我们来学习如何以图片作背景显示文字。
开始学习吧！
先来看看效果：
是不是特别好看，其HTML代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>以图片作背景显示文字</title><style type="text/css">#test {/* 链接my_picture.jpg图片资源 */background-image: url(my_picture.jpg);/* 设置标签与网页边缘的距离 */padding: 20px;/* 防止图片重复显示（自己去试一下去掉该属性就知道了） */background-repeat: no-repeat;}</style>
</head>
<body><div id='test'><h1>This is a test.</h1><p>This is a test.You can see a picture.</p><p>And I am learning CSS.</p></div>
</body>
</html>

（Tips：以上代码必须在各大主流浏览器运行，因为这引用了CSS3的语法，不过，你可能根本不需要这个提示（笑ing））
使用浏览器打开这个页面，你就可以看到上面那张精美的图片了！

CSS学习笔记：以图片作背景显示文字相关推荐

CSS学习笔记-07-字体与背景
文章目录 7.字体与背景 7.1.图标字体(iconfont) 7.2.行高 7.3.文本样式 7.4.背景 7.5.雪碧图的使用 7.6.线性渐变 7.7.径向渐变 7.字体与背景 7.1.图标字体 ...
CSS学习中|插入图片和背景图片区别
1.插入图片,用的最多,比如产品展示类,移动位置只能靠盒模型 padding margin 2.背景图片我们一般用于小图标的背景背景图片只能通过background-position 插入图片代码: ...
Cocos2dx学习笔记（三）背景、文字
1.前一篇文章最后,运行程序后窗口内一片黑,没有任何内容.是因为场景内没有添加任何东西,现在就来逐一添加相应的内容. 2.首先,来添加背景图片和文字,使用两个类:CCSprite和CCLabelTTF ...
Web前端开发之CSS学习笔记3—颜色和背景
目录 1.CSS的颜色表达 1.1前景色color 1.2背景色background-color 2.背景 2.1 background-image:url()设置背景图; 2.2 backgroun ...
css学习笔记3--灵活的背景定位
(1) background-position方案我们可以利用这一属性指定背景图片距离任意角的偏移量. div {width: 30em;height: 15em;background: url(h ...
html css学习笔记~ 基础知识和页面显示的四个区域内容及display:flex 等常用的一些命令（手画）
一般在html文件中输入<link href=".../xxx.css" rel="stylesheet"/> 通过这样的外部样式联系 css & ...
OpenCasCade学习笔记(三)：加载显示STEP格式图片，并实现平移、缩放和旋转操作
OpenCasCade学习笔记(三):加载显示STEP格式图片,并实现平移.缩放和旋转操作 C3DWidget.h #pragma once#include <QtWidgets/QApplic ...
CSS 学习笔记 - 盒模型
CSS学习笔记 - 盒模型外边距margin 内边距padding 背景background 背景图background-image 边框border 样式宽度颜色圆角边框图片border- ...
CSS学习笔记——精灵图(sprite)
CSS学习笔记目录一.什么是精灵图? 二.精灵图的优点三.精灵图的基本用法 1.打开ps导入精灵图 2.测量字母的大小及坐标 3.效果图 4.代码实现总结一.什么是精灵图? 所谓精灵图就是图片 ...

CSS学习笔记：以图片作背景显示文字

CSS学习笔记：以图片作背景显示文字相关推荐

最新文章

热门文章