如何使用 PNG 徽标而不是圆圈
Posted
技术标签:
【中文标题】如何使用 PNG 徽标而不是圆圈【英文标题】：How to use a PNG logo instead of the circle 【发布时间】：2021-11-30 09:40:10 【问题描述】：如何使用透明的 PNG 图像而不是剪裁 svg。 请帮助需要一个透明的 PNG 图像而不是圆形。
CodePen link
这里是 javascript
var section = document.querySelector('section');
window.addEventListener('scroll', function()
var value = window.scrollY;
section.style.clipPath = "circle("+ value +"px at center)"
)
谢谢！
【问题讨论】：
【参考方案1】：如果我正确理解了这个问题，
您需要更改 CSS 部分，例如 background: url(/yourlink);
【讨论】：
是的，只需查看此 Accenture.com/in-en 页面底部即可了解该 Accenture 徽标的动画效果。【参考方案2】：可以通过指定heightwidth并将border-radius赋予图像。
滚动时的值变化
var section = document.querySelector('section');
window.addEventListener('scroll', function()
var value = window.scrollY;
section.style.height = value +"px"
section.style.width = value +"px"
)*
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
section
position: fixed;
top: 0;
left: 0;
/*width: 100%;
height: 100vh;*/
background: url(https://www.prixgen.com/wp-content/uploads/2018/04/mission.jpg);
background-size: contain;
background-attachment: fixed;
border-radius:500px;
.container
position: relative;
margin-top: 200vh;
background: #fff;
padding: 100px;
.container h2
font-size: 2.5em;
.title
position: relative;
top: 250px;
z-index: 1;
font-size: 2em;
text-align: center;
width: 100%;
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Join us</title>
</head>
<body>
<h2 class="title">Join us for Better Future</h2>
<section></section>
<div class="container">
</div>
</body>
</html>【讨论】：
这不是解决方案，我如何通过 PNG 徽标替换 Circle。请检查 URL Accenture.com/in-en 转到页面底部并查看我正在寻找的徽标动画... 你想达到什么目标，因为它不是很清楚更具体 来自左边的圆圈，需要它在中心。我需要一个 PNG 或矢量标志而不是圆形。 如果你能用视频或图片来描述你想做的事情就很容易了以上是关于如何使用 PNG 徽标而不是圆圈的主要内容，如果未能解决你的问题，请参考以下文章