php 20180511 slickの高さを保持して背景にしない方法!
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了php 20180511 slickの高さを保持して背景にしない方法!相关的知识,希望对你有一定的参考价值。
.con_main {
overflow: hidden;
position: relative;
text-align: center;
.main_inner {
position: relative;
.box_catch {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 1;
h2 {
color: #fff;
font-family: $f_min;
font-weight: normal;
@include fsz_r(33,24,20);
writing-mode: vertical-rl;
margin: 0 auto;
@include cV(margin-bottom,15px,10px,5px);
line-height: 1.8;
letter-spacing: .25em;
text-shadow: 0 0 6px #000;
@include mq(min_max_w,500px,767px) {
@include fsz(15);
}
}
.sub_en {
color: #fff;
text-shadow: 0 0 6px #000;
@include mq(min_max_w,500px,767px) {
@include fsz(12);
}
}
}
.box_insta {
position: absolute;
@include cV(bottom,100px,60px,10px);
@include cV(right,6%,5%,2%);
z-index: 10;
@include cV(width,auto,20%,25%);
}
.slide_main {
left: 50%;
width: 2000px;
@include cV(width,2000px,1300px,725px);
@include mq(min_max_w,500px,767px) {
height: 1000px;
}
position: relative;
transform: translate(-50%, 0);
.slide {
@include cV(height,735px,500px,280px);
@include mq(min_max_w,500px,767px) {
height: 380px;
}
}
}
}
}
//slickオプションはいつも通り。CMSとかの時使える
//http://west02.ab-ss.com/elinn-kyoto.com/html_renewal/
<div class="con_main">
<div class="main_inner">
<div class="box_catch">
<h2>あなたの<br>京都観光に<br>寄りそう</h2>
<p class="sub_en">Casual Relaxing Hotel.</p>
</div>
<div class="box_insta">
<a href="https://www.instagram.com/el_inn_kyoto/?hl=ja" class="over">
<img src="images/home/img_main_insta.jpg" alt="">
</a>
</div>
<div class="slide_main">
<div class="slide slide01">
<img src="images/home/img_slide_main01.jpg" alt="">
</div>
<div class="slide slide02">
<img src="images/home/img_slide_main02.jpg" alt="">
</div>
<div class="slide slide03">
<img src="images/home/img_slide_main03.jpg" alt="">
</div>
<div class="slide slide04">
<img src="images/home/img_slide_main04.jpg" alt="">
</div>
<div class="slide slide05">
<img src="images/home/img_slide_main05.jpg" alt="">
</div>
</div><!-- /.box_slide -->
</div>
</div><!-- /.con_main -->
以上是关于php 20180511 slickの高さを保持して背景にしない方法!的主要内容,如果未能解决你的问题,请参考以下文章
html IMGの高さを打ち消したい
php 170522フォトギャラリーで縦写真も高さをトリミングして合わるる
text FZFの高さとカラースキーム(solarized)
php 20180330表格でブラウザバックしてもJSで表示したコンテンツを保持
php 20180511 PageTopを途中で表示
Slick slider ().slick 不是 Wordpress PHP 的函数