<commit_before>---
layout: post
title: 用CSS让你的文字更有文艺范
category: CSS
tags: [CSS]
description: 用CSS让你的文字更有文艺范
keywords: css 文字
---

用CSS让你的文字更有文艺范

# 用CSS让你的文字更有文艺范
透明文字，模糊文字，镂空文字，渐变文字，图片背景文字，用CSS让你的文字也有freestyle～
## 前言
我们做页面涉及字体的时候，最多就是换个color换个font-family，总是觉得没体现出你内心的文艺范，这时是不是抱怨CSS并没有给文字设置什么样式，抱怨是没用哒，我们自己动手，看看能不能“创造”出一些CSS字体样式呢～
## 透明文字
1. 用rgba调整透明度
```
div{
    background-color: pink;
    color: rgba(0, 0, 0, 0.1);
}
```
![](http://vinceimage.oss-cn-beijing.aliyuncs.com/blog/06B76BD6-3B89-4D38-8FB9-D8C10EA2D031.png)
2. 用opacity调整遮罩<commit_msg>Update 2017-08-20-用CSS让你的文字更有文艺范.md<commit_after>---
layout: post
title: 用CSS让你的文字更有文艺范
categories: CSS
tags: [CSS]
description: 用CSS让你的文字更有文艺范
keywords: css 文字
---

用CSS让你的文字更有文艺范

# 用CSS让你的文字更有文艺范
透明文字，模糊文字，镂空文字，渐变文字，图片背景文字，用CSS让你的文字也有freestyle～
## 前言
我们做页面涉及字体的时候，最多就是换个color换个font-family，总是觉得没体现出你内心的文艺范，这时是不是抱怨CSS并没有给文字设置什么样式，抱怨是没用哒，我们自己动手，看看能不能“创造”出一些CSS字体样式呢～
## 透明文字
1. 用rgba调整透明度
```
div{
    background-color: pink;
    color: rgba(0, 0, 0, 0.1);
}
```
![](http://vinceimage.oss-cn-beijing.aliyuncs.com/blog/06B76BD6-3B89-4D38-8FB9-D8C10EA2D031.png)
2. 用opacity调整遮罩
{'fraction_non_alphanumeric': 0.1438721136767318, 'fraction_numerical': 0.055062166962699825, 'mean_word_length': 6.318181818181818, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6078151', 'n_tokens_mistral': 803, 'n_tokens_neox': 834, 'n_words': 66}