CSS設定透明度

阿新 • • 發佈：2019-01-11

div{
    filter: alpha(opacity=50);
    -moz-opacity: .5;
    opacity: .5;
}

下面是我用到的一個例子，最終效果為：

這裡寫圖片描述

這裡底部的小條就是透明的，其樣式為：

    .ck-slideBox {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 36px;
        background: #000;
        filter: alpha(opacity=50);
        -moz-opacity 
: .5;
        opacity: .5;
        text-align: center;
        z-index: 10;
    }

CSS設定透明度

div{ filter: alpha(opacity=50); -moz-opacity: .5; opacity: .5; } 下面是我用到的一個例子，最終效果為：這裡底部的小條就是透明的，其樣式為： .ck-sli

css設定透明度不影響子元素

<body> <div style="background-color:rgba(0,255,0,0.2);"> 顯示文字 </div> </body> 通過RGBA設定透明度,只有最新的瀏覽器支援，支援I

css設定背景透明度

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>背景透明度</title> <style> .demo{ padding: 25px

CSS設定字型種類，如宋體，楷體，黑體，仿宋等等。。。。

如：宋體,div裡面設定字型樣式 <div style="font-family:Simsun"> 全域性設定字型樣式 <body style="font-family:Simsun"> 字型樣式的CSS表示大全華文細黑：STHeiti

css設定滾動條樣式，解決ios修改滾動條樣式無效問題

css部分 /* 橫向滾動容器 */ .scroll-wrapper { width: 100%; overflow-x: auto; height: 22px; white-space: nowrap; display: flex;

使用css設定三角形

1.在開發中，有時候會用到一些小三角形來強調或者標記元素，這樣以便區分不同的專案，然後把三角形繪製成一個比較明顯的顏色，就達到效果了，那怎麼才能畫出三角形呢，之前我也不清楚，最近看到了有些網頁在使用，在進行標記的時候，都是使用的是背景圖片進行標記，這樣在網頁顯示的時候，感覺有點生硬，畢竟圖片的載入沒有css載

CSS設定溢位文字顯示省略號

CSS設定溢位文字顯示省略號相關CSS .text-ellipse{ width: 100px; height:50px; border:2px solid red; overflow:hidden; text-overflow:ellipsi

css設定固定高度多行超出變省略號，適用於手機端

基本設定： display: -webkit-box;/** 物件作為伸縮盒子模型顯示 **/ word-break: break-all; text-overflow: ellipsis; -webkit-box-orient: vertical

css設定p標籤多餘文字顯示省略號

效果： <p><strong>商品名稱：</strong>新鮮現摘雲南綏江半邊紅李子甜脆脫骨李6斤當季綠色有機水果包郵</p></div> p{ display: block; o

08：CSS設定表格樣式

1.一個簡單的表格 table.html <!doctype html> <html> <head> <meta charset="utf-8"> <title>表格樣式</title> &

07：CSS設定列表樣式

1.有序列表(ol)和無序列表（ul） list.html <!doctype html> <html> <head> <meta charset="utf-8"> <title>列表樣式</title&

CSS設定表格樣式，樣式表格

table{ border-collapse: collapse; //相鄰邊被合併 &nbs

css設定多行超出變省略號，適用於手機端。

width: 200px; word-break: break-all; text-overflow: ellipsis; display: -webkit-box; /** 物件作為伸縮

CSS設定瀏覽器滾動條樣式

/*定義滾動條高寬及背景高寬分別對應橫豎滾動條的尺寸*/ ::-webkit-scrollbar { width: 5px; height: 110px; background-color: #F5F5F5; } /*定義滾動條軌道內陰影+圓角*/

css設定文字多餘部分顯示省略號

如果只顯示一行，則可以使用以下方法：　　overflow: hidden; 　　text-overflow:ellipsis; 　　white-space: nowrap; 如果需要顯示多行，在需要設定的元素style中新增以下程式碼：　　word-break: brea

css設定使文字顯示2行多餘的為省略號。。。

.title{ font-size: .7rem; line-height: 1.5rem; overflow: hidden; /** 隱藏超出的內容 **/ word-break: break-all; text-

CSS設定行內元素和塊級元素的水平居中、垂直居中

CSS設定行內元素和塊級元素的水平居中、垂直居中首先，介紹一下行內元素和塊級元素，這個很重要，因為有的屬性只能用於塊元素，而有的正好相反，在一定的情況下，它們也可以相互轉換，比如用display來進行設定。行內元素: ①不佔據一整行，隨內容而定，有以下特點： ②不可以設定

CSS設定選中網頁文字時的背景和顏色

在網頁中，選中某段文字，預設的顯示效果為：可以看到，選中後文字顏色為白色，背景為藍色。現我們想設定，選中後文字為紅色，背景為黃色。需要用到CSS偽類 ::selection。 IE9+、Opera、Google、Chrome、Safari都支援 ::selection 選擇器。 Firefox 通

谷歌瀏覽器css設定滾動條

效果: 程式碼 /*滾動條樣式：谷歌瀏覽器下*/ ::-webkit-scrollbar{ width: 10px; height: 10px; background-color: #f5f7fa; } /*滾動條的軌道*/ ::-webkit-scrol

css設定多列等高佈局

初始時，多個列內容大小不同，高度不同。現在需要設定不同的背景來顯示，而且各個列的高度需要保持一致。那麼這就需要利用到多列等高佈局。最終需要的效果： 1. 真實等高佈局 flex 技術點：彈性盒子佈局flex，預設值就是自帶等高佈局的特點。定義flex佈局的時候，有一些預設值。 flex-directi

CSS設定透明度

相關推薦