码迷,mamicode.com
首页 > 其他好文 > 详细

一个文字背景代码

时间:2019-09-10 01:03:33      阅读:77      评论:0      收藏:0      [点我收藏+]

标签:span   set   区域   com   百分比   img   背景图   title   效果图   

将文字设置成为透明颜色再给文字设置背景图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    body{ margin:0px;
        padding:0px;  
        font-family:"黑体";  
        background:red;}  
        h1{  font-size: 200px;  
            text-transform:uppercase; /*定义文本中的大小写,uppercase仅有大写字母 */  
            font-weight: 900px;  
            /*定义文本的粗细,从100~900*/  
            letter-spacing:1px;  
            /*设置字母间距*/ 
             position:absolute;  
             top:50%; 
            left:50%;  
            transform: translate(-50%, -50%);  
            /*position & transform: translate(-50%, -50%) 20 实现块元素百分比下居中*/  
            margin:0; 
            background:url(1.jpg) 50% 50%; 
            /*背景图片路径和size大小*/  
            background-size:cover; 
            /*此时会保持图像的纵横比*/ 
            /*并将图像缩放成将完全覆盖背景定位区域的最小大小。*/ 
             -webkit-text-fill-color:transparent;  
             /*text-fill-color是设置指定文字的填充颜色,transparent透明*/
              -webkit-background-clip: text;
              /*背景绘制在text区域内,剪切成文字形状*/  }</style>
</head>
<body>
    <h1>干嘛呢</h1>
</body>
</html>

效果图:

技术图片

 

一个文字背景代码

标签:span   set   区域   com   百分比   img   背景图   title   效果图   

原文地址:https://www.cnblogs.com/niuyaomin/p/11494985.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!