div+Css布局实现文章段落图片嵌入首字母大写效果代码-html代码-BFW代码库

div+Css布局实现文章段落图片嵌入首字母大写效果代码

代码语言：html

代码描述：div+Css布局实现文章段落图片嵌入首字母大写效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
  
<style>
@import url(https://fonts.bunny.net/css?family=aladin:400|almendra:400);

*{
  box-sizing: border-box;
}

body{
  font-family: 'Almendra', serif;
  font-size: 1rem;
  line-height: 1.55;
  background-color: #000;
  color: white;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
}
body::before{
  content: '';
  position: fixed;
  inset: 0;
   background-image: url("//repo.bfw.wiki/bfwrepo/image/628436b16dc01.png");
  background-position: fixed;
  background-size: cover;
  z-index: -1;
  opacity: .5;
}
.wrapper{
  width: 100%;
  max-width: 450px;
  padding: 2rem 2rem 2rem 3rem;
  background: rgba(255 255 255 / .05);
  backdrop-filter: blur(2px);
  border-radius: 5px;
  outline: 1px solid rgba(255 255 255 / .15);
  outline-offset: 8px;
}
h1{
  margin: 0;
  padding: 0;
  text-transform: capitalize;
  line-height: 1.5;
  font-size: 1.3rem;
}
h2{
  margin: .5rem 0 5rem;
  font-size: 1rem;
}
p{
  position: relative;
  color: rgb(214, 211, 209);
}
p + p{
  margin-top: 1.5rem;
}
p:first-of-type::first-letter{
  visibility: hidden;
  font-size: 0rem;
}
p:first-of-type::before{
  content: 'S';
  --clr-stroke: rgba(0 0 00 / .5);
  
  font-family: 'Aladin', handwriting;
  float:left;
  font-size: 15rem;
  font-weight: 800;
  font-style: italic;

 /* outline: 1px dashed green;*/
  line-height: .95;
  b.........完整代码请登录后点击上方下载按钮下载查看