html生成海报图片

最新推荐文章于 2025-04-09 14:51:07 发布

阿木木的绷带

最新推荐文章于 2025-04-09 14:51:07 发布

阅读量1.1k

点赞数

分类专栏： java-web 文章标签： html5 css javascript

本文链接：https://blog.csdn.net/qq_24796807/article/details/114880530

版权

本文介绍了如何使用HTML、CSS和JavaScript技术来创建海报图片。提供了详细的html源码，需要的js文件，以及手机在线演示和源码下载链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html生成海报图片

效果图(源码下载地址在文章底部)

效果图(源码下载地址在文章底部)

演示效果图

html源码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>生成海报</title>
<style type="text/css">
* {
  outline: 0;
  padding: 0;
  margin: 0;
  border: 0;
}
html, body {
    width: 100%;
    height: 100%
}

body {
    margin: 0px;
    width:100%;
    height:100%;
    font-family: "华文细黑";
    background: url("pc/xingkong.jpg") no-repeat;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    "
}

.upm-setting_header_img {
    margin-top: 180px;
    margin-left: 60px;
    padding: 0;
    display: block;
    width: 10.33333rem;
    height: 10.33333rem;
    border-radius: 1.33333rem;
    margin-right: 0.32rem;
}
.upm-setting_header_img2 {
    margin-top: 0px;
    margin-left: 40px;
    padding: 0;
    display: block;
    width: 10.33333rem;
    height: 10.33333rem;
    border-radius: 1.33333rem;
    margin-right: 0.32rem;
}

.uname {
    margin: 1px;
    margin-top: 60px;
    margin-left: 650px;
    font-size: 30px;
    display: block;
    color: white;
}

.uname0 {
    margin: 1px;
    margin-top: 60px;
    margin-left: 450px;
    font-size: 40px;
    display: block;
    color: white;
}

.uname2 {
    margin: 1px;
    margin-left: 28px;
    font-size: 50px;
    display: block;
    color: white;
}
.uname3 {
    margin: 1px;
    margin-left: 28px;
    font-size: 40px;
    display: block;
    color: white;
}

.qianduanwz2 {
    margin: 1px;
    margin-left: 28px;
    font-size: 40px;
    display: block;
}
.qianduanwz {
    height: 200px;
    width: 100%;
    position: fixed;
    top: 0;
}

.footer {
    height: 200px;
    width: 100%;
    position: fixed;
    bottom:

最低0.47元/天解锁文章