如何在光滑的旋转木马中删除背景?

时间:2016-12-22 08:41:47

标签: javascript html css

HTML

    <div class="background">    
      <div class="slick-test">
        <div class="first-test"> Slide one</div>
        <div class="sec-test">Slide two</div>
        <div class="third-test">Slide three</div>
        <div class ="fourth-test">Slide four</div>
      </div>
    </div>

CSS

.background  {
    position: relative;
    top: 7.5%;
    left: 5%;
    right: 5%;
    background-color: rgba(187, 189, 193, 0.8); 
    background-color: rgba(187, 189, 193);
    box-sizing: border-box;
    border-radius: 15px;    
    width: 90%;
    height: 85%;
    padding: 30px;
}

的Javascript

    $(document).ready(function() {
      $('.slick-test').slick({
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 3,
        variableWidth: true
      });
    });

然而,光滑的旋转木马的背景来自我的背景,我该如何删除它? 我也无法在每张幻灯片之间获得保证金,为什么呢? 谢谢!

我的JSfiddle:https://jsfiddle.net/953jmndf/

5 个答案:

答案 0 :(得分:1)

<强>更新

>>> wordsData.show()
+--------------------+--------------------+
|                desc|               words|
+--------------------+--------------------+
|Virat is good bat...|[virat, is, good,...|
|     sachin was good| [sachin, was, good]|
|but modi sucks bi...|[but, modi, sucks...|
| I love the formulas|[i, love, the, fo...|
+--------------------+--------------------+

>>> wordsData
DataFrame[desc: string, words: array<string>]


>>> vocab = wordsData.select(explode('words')).rdd.flatMap(lambda x: x)
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
  File "/opt/BIG-DATA/spark-2.0.0-bin-hadoop2.7/python/pyspark/rdd.py", line 305, in flatMap
    return self.mapPartitionsWithIndex(func, preservesPartitioning)
  File "/opt/BIG-DATA/spark-2.0.0-bin-hadoop2.7/python/pyspark/rdd.py", line 330, in mapPartitionsWithIndex
    return PipelinedRDD(self, f, preservesPartitioning)
  File "/opt/BIG-DATA/spark-2.0.0-bin-hadoop2.7/python/pyspark/rdd.py", line 2383, in __init__
    self._jrdd_deserializer = self.ctx.serializer
AttributeError: 'SparkSession' object has no attribute 'serializer'

Check updated fiddle

答案 1 :(得分:1)

我想你想要

.slick-test div {
    background-color: none !important;
}

并确保最终级联它。

第二个想法,我认为css是通过Sliders脚本添加的,因此当在</body>之前在文档末尾添加css或添加以下JQuery行时,它将对你有用

$('.slick-test div').css({"background-color":"transparent"});

$(document).ready

中您自己的代码旁边

答案 2 :(得分:0)

您想要删除幻灯片的直接背景。

所以我已经 String str ="I like Cats. Hey."; //Scanner s = new Scanner(System.in); //System.out.println("Would you like to play again?"); String[] strs = str.split("[.][ ]"); int count =0; for(String string : strs){ if(Character.isUpperCase( str.charAt(0) )){ count++; } } System.out.println("the count :"+count); 给了var dataQuery = DataAccess.AppEventRepository.AllNoTracking; // get property func based on provided filter Func<AppEvent, DateTime?> timeGroupProp = null; if (filters.TimeSpanId == (int)TimeSpanEnum.Daily) timeGroupProp = e => e.InsertDay; if (filters.TimeSpanId == (int) TimeSpanEnum.Monthly) timeGroupProp = e => e.InsertMonth; if (filters.TimeSpanId == (int) TimeSpanEnum.Yearly) timeGroupProp = e => e.InsertYear; var groupedDataQuery = dataQuery // downgrading to LINQ2Object, because Invoke is not supported in LINQ2SQL .ToList() .GroupBy(e => new {InsertGroupProp = timeGroupProp?.Invoke(e), e.CountryId}) .Select(grp => new AuditReportGroupingDataModel { GroupTime = grp.Key.InsertGroupProp.Value, CountryId = grp.Key.CountryId.Value, Count = grp.Count() }); ,我可以看到它在幻灯片后面。所以,如果你给css

background:black

然后它会对你有用。

这是JSFiddle

答案 3 :(得分:0)

只需将背景颜色删除为;

.background  {
    position: relative;
    top: 7.5%;
    left: 5%;
    right: 5%;
    background: none; 
    box-sizing: border-box;
    border-radius: 15px;    
    width: 90%;
    height: 85%;
    padding: 30px;
}

或者您可以将其保留为background:transparent;

答案 4 :(得分:0)

$(document).ready(function() {
        $('.slick-test').slick({
          infinite: true,
          slidesToShow: 3,
          slidesToScroll: 3,
          variableWidth: true
        });
 });
.background  {
		position: relative;
		top: 7.5%;
		left: 5%;
		right: 5%;
		background-color: rgba(187, 189, 193, 0.8);	
		background-color: rgba(187, 189, 193);
		box-sizing: border-box;
		border-radius: 15px;	
		width: 90%;
		height: 85%;
		padding: 30px;
}
.slick-test div { 
        background-color: transparent !important; 
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" rel="stylesheet">
<div class="background">    
      <div class="slick-test">
        <div class="first-test"> Slide one</div>
        <div class="sec-test">Slide two</div>
        <div class="third-test">Slide three</div>
        <div class ="fourth-test">Slide four</div>
      </div>
    </div>