一个文字背景代码

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

<!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>

效果图：

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

时间： 2024-10-31 23:07:19

一个文字背景代码的相关文章

css如何实现一个文字两种颜色代码实例

css如何实现一个文字两种颜色代码实例:在实际应用中可能需要设置文本效果比较炫酷.有一种效果就是将一个文字设置为两种颜色,使用普通的方法肯定是无法实现.下面就分享一下实现此功能的代码实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/&qu

html文字滚动代码（转）

html文字滚动代码代码如下<MARQUEE>滚动文字</MARQUEE> <marquee style="WIDTH: 388px; HEIGHT: 200px" scrollamount="2" direction="up" ><div align="left" ><br /></div ><center ><font face=&

学习笔记之03-第一个C程序代码分析

一.代码分析打开项目中的main.c文件(C程序的源文件拓展名为.c),可以发现它是第一个C程序中的唯一一个源文件,代码如下: 1 #include <stdio.h> 2 3 int main(int argc, const char * argv[]) { 4 // insert code here... 5 printf("Hello, World!\n"); 6 return 0; 7 } 1.#include <stdio.h> #include 是

第一个C程序代码分析

一.代码分析 1.打开项目中的main.c文件(C程序的源文件拓展名为.c),可以发现它是第一个C程序中的唯一一个源文件,代码如下: #include <stdio.h> int main(int argc, const char * argv[]) { // insert code here... printf("Hello, World!\n"); return 0; } 2.#include <stdio.h> (1)#include 是C语言的预处理指令

【C语言】03-第一个C程序代码分析

前面我们已经创建了一个C程序,接下来分析一下里面的代码. 项目结构如下: 一.代码分析打开项目中的main.c文件(C程序的源文件拓展名为.c),可以发现它是第一个C程序中的唯一一个源文件,代码如下: 1 #include <stdio.h> 2 3 int main(int argc, const char * argv[]) 4 { 5 6 // insert code here... 7 printf("Hello, World!\n"); 8 return 0;

基于HTML5自定义文字背景生成QQ签名档

分享一款利用HTML5实现的自定义文字背景应用,首先我们可以输入需要显示的文字,并且为该文字选择一张背景图片,背景图片就像蒙版一样覆盖在文字上.点击生成QQ签名档即可将文字背景融为一体生成另外一张图片,你也可以下载这张拥有你QQ签名档的图片. 在线预览源码下载实现的代码. html代码: <canvas id="mycanvas" width="1280" height="512"></canvas> 内容:<

C语言 03-第一个C程序代码分析

本文目录一.代码分析二.开发和运行C程序的步骤三.总结说明:这个C语言专题,是学习iOS开发的前奏.也为了让有面向对象语言开发经验的程序员,能够快速上手C语言.如果你还没有编程经验,或者对C语言.iOS开发不感兴趣,请忽略. 在上一篇中我们已经创建了一个C程序,接下来分析一下里面的代码. 项目结构如下: 一.代码分析打开项目中的main.c文件(C程序的源文件拓展名为.c),可以发现它是第一个C程序中的唯一一个源文件,代码如下: 1 #include <stdio.h> 2 3 in

JS实现Li列表的无缝垂直文字滚动代码

非Table模式的新闻列表滚动,学习CSS的朋友可能都能做出这种效果来.运用了CSS中的Li列表标签,加上javaScript代码控制,完成完美的无缝滚动效果.在兼容性方面,在ie6,7,8,9,firefox等主流浏览器下均测试通过,用的时候您只需改变一下样式和大小,再将Js封装起来,用时候调用,就更简洁了,相信这款实用的文字滚动正是你需要的. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http

div css鼠标悬停锚文本超链接文字背景颜色或图片变化

div css鼠标悬停锚文本超链接文字背景颜色或图片变化(体感音乐) css鼠标悬停超链接文字上时背景改变,鼠标经过文字链接时(悬停),文字的背景图片发生改变(出现背景图片或背景颜色). 鼠标经过悬停在超链接文字上时背景颜色或背景图片出现或改变教程篇.(体感音乐) 此DIV CSS布局技巧其实是对a标签做鼠标经过CSS样式.利用以下代码: a{...} 原始超链接默认样式设置a:hover{...}鼠标悬停经过时超链接锚文本CSS样式(扩展阅读:ie6 hover)一.链接文字无背景鼠标经过悬停