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

hello,大家好,我是wangzirui32,今天我们来学习如何以图片作背景显示文字。
开始学习吧!
先来看看效果:
CSS学习笔记:以图片作背景显示文字_第1张图片是不是特别好看,其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,html)