UnoCSS实现背景图片样式加载
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UnoCSS 背景图片样式加载示例</title>
<style>
/* 引入UnoCSS库 */
@import url("https://unocss.antfu.me/preset-dank/preset.css");
/* 应用背景图片样式 */
.bg-img {
background-image: var(--unocss-preset-dank-background-image); /* 应用预设的背景图片 */
background-size: cover; /* 背景图片覆盖整个元素 */
background-position: center; /* 背景图片居中显示 */
background-repeat: no-repeat; /* 背景图片不重复 */
width: 100%; /* 元素宽度 */
height: 400px; /* 元素高度 */
display: flex; /* 使用Flexbox布局 */
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
color: white; /* 文字颜色 */
font-size: 20px; /* 文字大小 */
text-shadow: 1px 1px 2px black; /* 文字阴影 */
}
</style>
</head>
<body>
<div class="bg-img">
这是一个带有背景图片的容器
</div>
</body>
</html>这个代码示例展示了如何在HTML文件中使用<style>标签来引入UnoCSS库，并定义一个.bg-img类来应用预设的背景图片样式。同时，示例中还包含了一些基本的CSS属性来设置背景图片的显示方式，以及容器的布局和文本样式。
评论已关闭