|
|
请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
x
本帖最后由 马黑黑 于 2022-4-2 09:44 编辑
一、素材准备:
① 一张合适尺寸的帖子背景图;
② 一张透明背景的GIF小图片
二、写CSS代码
(一)主窗体 定位、尺寸、加入背景图片
.outer {
position: relative; /* 必须定位 */
left: -22px; /* 根据宽度决定左移量 */
width: 800px;
height: 454px;
background: olive url('背景图片地址') no-repeat center/contain;
}
(二)::before伪元素 主要用来显示标题
.outer::before {
content: attr(data-tt); /* 标题文本变量 /*
position: absolute; /* 必须定位 */
padding: 8px; /* 内边距 - 为了拉开文本与边缘的距离 */
font: bold 3em / 1.5em Sans-serif; /* 字体设定 */
color: olive; /* 文本颜色
text-shadow: 2px 2px 6px rgba(0, 120, 120, .6); /* 文本阴影修饰 */
writing-mode: vertical-lr; /* 文本竖排 不需要的删掉 */
}
(三)::after伪元素 用于布置动态背景
.outer::after {
content: ''; /* 必须 */
position: absolute; /* 必须定位 */
width: 100%; /* 布满整帖宽度 */
height: 100%; /* 布满整帖高度 */
/* 如果需要局部加动态背景,则可改变宽高,并定义 left 和 top 值,
使动图去渲染所需要的区域
*/
background: url('gif图片地址'); /* 背景图默认设置会自动平铺 */
}
三、HTML代码 必须给出 ::before 伪元素定义的变量值(红色部分)
<div class="outer" data-tt="花潮之歌">
<!-- 帖子的其它HTML代码 -->
</div>
|
评分
-
| 参与人数 2 | 威望 +80 |
金钱 +160 |
经验 +80 |
收起
理由
|
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
加林森
| + 30 |
+ 60 |
+ 30 |
赞一个! |
查看全部评分
|