Question

我在jquery中有一个闪光效果，但闪光效果正在背景上，无论如何我可以在图像上获得那些闪光而不是背景。

这是我的代码：

(function () {
    var sparkle = new Sparkle();
    sparkle.init('.summs');
})();

html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
		body{margin:0}
		article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}
		a{background:transparent}
		a:active,a:hover{outline:0}
		h1{font-size:2em;margin:.67em 0}
		img{border:0}
		svg:not(:root){overflow:hidden}
		code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}
		b,strong,optgroup{font-weight:700}
		pre,textarea{overflow:auto}

		html {
			height: 100%;
		}

		body {
			color: #AAA;
			background-color: #000;
			line-height: 1.4;
			margin: 50px;
		}

		h1 {
			color: #FFF;
		}

		h2 {
			padding: 10px 0;
			border-bottom: 1px solid #444;
		}

		a {
			color: inherit;
		}

		em {
			font-family: monospace;
			font-size: 16px;
			font-style: normal;
			background-color: #333;
			border-radius: 3px;
			padding: 3px 5px;
		}

		pre {
			color: #FFF;
			background-color: #444;
			padding: 0 25px;
			border-radius: 3px;
		}

		#wrapper {
			width: 20%;
			margin: auto;
			border:red solid 1px
		}
		div.summs {
  background: rgba(0, 0, 0, 0) url("https://custom.cvent.com/9BC2D0988F874B5C8C15E9D14B6E2F3B/pix/21abaeaeb5d94c73b6814e90cf55d240.jpg") no-repeat scroll center top;
  height: 516px;
  margin: 0 auto;
  position: relative;
  text-align: center;
  top: -40px;
  width: 1000px;
}

<script src="https://s3-us-west-1.amazonaws.com/creative-event/sparkle-effect/sparkle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="summs">
    <div class="onslide2">
        <h1 class="bold"><strong>Sparkling Beauty&nbsp;Sparkling Service</strong></h1>
        <br>
        <br>
        <h1 class="l2">GALA DINNER<br>
            Sparkling Dior Ambassadress</h1>
        <h1 class="l3">26<sup>th</sup> May 2016<br>
            JW Marriott Hotel, Macau</h1>
        <h1 class="l4">Dress Code: Rose Gold and Champagne&nbsp;</h1>
        <h2>Remember to bring your sparkling outfit.<br>
            There will be a prize for best-dressed.</h2>
    </div>
</div>

Fiddle

对不起，我不知道如何在这里建立链接。请求您复制网址并粘贴。

需要帮助

Answer 1

我自己创造了这个。如果你使用这个，如果你给我信用点会很好。但是，嘿，你做你想做的。

https://jsfiddle.net/virginieLGB/mL6uf3xm/5/

只有你需要改变的是

mySparkle.init( $( ".summs" ) , 150 );

我想你会想要保留这里的元素，但是你可以用任意数量的星星改变'150'。

玩得开心

Jquery Sparkle效果不起作用

1 个答案: