Using css to generate the first letter head image code

When making the template, in order to look beautiful, some pictures will be displayed in some places, and the pictures in the article will be obtained through code for display. When there are no pictures in the article, we can use a default picture, and always make these default pictures not very beautiful. At this time, we can use css To generate a picture of the first letter of the article title, will it look beautiful? How to use css to generate the first letter of the text picture?

Using css to generate the first letter head image code

Copy the following css code to the css file, When the html code is copied to the desired place, the function of using css to generate the first letter text avatar can be realized. Note that different css styles should be set for Chinese and English numbers. You also need to copy a copy of the css style and change its name, and then modify the text independent and letter spacing values. Other attributes can be modified as required.

 //Css style code .lanye-textavatar{ width: 48px; height: 48px; line-height: 48px; background-color: #718af5; vertical-align: middle; overflow: hidden; font-size: 20px; text-indent: 11px; text-align: center; letter-spacing: 11px; color: #fff; border-radius: 60%; } //Html calling code <div class="lanye textavatar">Blue Leaf Sharing</div>