css提示图像和固定背景[重复]答案

【问题标题】：css intimated image and fixed background [duplicate]css提示图像和固定背景[重复]
【发布时间】：2019-03-21 15:41:29
【问题描述】：

这是我网站上横幅的 css 代码

https://www.gettwitterretweet.com/css/images/social.png（png图片）

.product-page {
  background: url('../img/people.jpg') repeat;
  background-size: cover;
  border-bottom: none !important;
  background-attachment: fixed;
  padding: 80px 0;
}

【问题讨论】：

标签： html css

【解决方案1】：

你可以这样做检查这个解决方案，只是你需要更新我使用背景颜色的背景图像

.product-page {
padding: 50px;
background-color: green; 
/* background: url('../img/people.jpg') repeat; */ 
transition: transform .2s; /* Animation */
width: 200px;
height: 200px;
margin: 0 auto;
background-size: cover;
border-bottom: none !important;
background-attachment: fixed;
padding: 80px 0;
}

.product-page:hover {
    transform: scale(1.5);
}

&lt;div class="product-page"&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

试试这个你可以管理你想要的持续时间。

@keyframes zoominout {
    0% {
        transform: scale(1,1);
    }
    50% {
        transform: scale(1.1,1.1);
    }
    100% {
        transform: scale(1,1);
    }
}

.wrapper img {
	animation: zoominout 1s infinite ;
}

&lt;div class="wrapper"&gt;&lt;img class="image" src="https://www.gettwitterretweet.com/css/images/social.png"&gt;&lt;/div&gt;

【讨论】：

我使用了此代码，但我也喜欢您的代码，感谢您的帮助 .product-page:before,.product-page:after{ content: "";显示：块；宽度：100%；高度：510px；位置：绝对；顶部：5px；动画名称：拉伸；动画持续时间：1.4s；动画定时功能：缓出；动画延迟：0.1s；动画方向：交替；动画迭代计数：无限；动画填充模式：无；动画播放状态：正在运行； } @keyframes 拉伸 { 0% { 变换：比例（.98）； }
@Krish cj 如果我的代码对您有用，请点赞我的回答 :)