7. 圖片

舉例說明，加入一張圖片:

	<img class="css7_1" src="./images/img1.jpg" alt="Picture">

css code:

	.css7_1{
		border-radius: 50%;
		/*width: 50%;*/
		max-width: 50%;
		/*將圖片置中*/
		display: block;
		margin-left:auto;
		margin-right: auto;
	}

	.css7_1:hover{
		border: 2px solid red;
		box-shadow: 0 0 3px 2px green;
		opacity: 0.5;
		filter: grayscale(10%);
		transform: scaleX(-1);
	}

border-radius: 50%;是將邊角變成有弧度，也可以給數值例如100px。
width: 50%;寬度為原圖片寬度的50%，也可以直接給數值例如500px。可以先使用軟體修改圖形大小以減少網頁的工作。可直接使用max-width: 50%;最大為50%，但是會隨著視窗縮放而改變大小。
display: block;margin-left:auto;margin-right: auto;這三行可將圖片置中。display: block;的意思是將圖片視為一個區塊。
圖片也可以有hover的屬性。並且可以加上border，shadow，及改變opacity
filter可增加圖片的效果，有以下選擇:
- filter: grayscale(10%); 顯示黑白照片
- filter: blur(2px); 使照片模糊
- filter: brightness(250%);改變亮度
- filter: contrast(180%);改變對比反差
- filter: hue-rotate(180deg);色調旋轉
- filter: invert(100%);
- filter: opacity(50%);同opacity
- filter: saturate(7);色彩滲透
- filter: sepia(100%);深褐色
- filter: drop-shadow(8px 8px 10px green);同shadow
transform
- transform: translate(50px, 100px);移動位置
- transform: rotate(45deg);旋轉
- transform: scale(2,3);縮放
- transform: scaleX(-1);X軸縮放，負號表示方向相反，數字表示比例
- transform: scaleY(-1);Y軸縮放，負號表示方向相反，數字表示比例
- transform: skewX(30deg);X軸扭曲
- transform: skewY(30deg);Y軸扭曲
- transform: skew(20deg, 30deg);雙軸扭曲
- transform: rotateX(150deg);X軸旋轉
- transform: rotateY(150deg);Y軸旋轉
- transform: rotateZ(150deg);Z軸旋轉

雙圖互調

簡單的方式讓滑鼠移過去之後顯示另一張圖。首先加入元件如下:

	<div class="css7_2">
		<img class="i1" src="./images/img3.jpg" />
		<img class="i2" src="./images/img4.jpg" />
	</div>

在同一個div內放置兩個圖(利用圖形處理軟體讓其大小相同)，然後加入css code如下:

	.css7_2{
		width:300px;
		height: 168px;
	}

	.i1{
		max-width: 100%;
		max-height: 100%;
		position:absolute;
		opacity:1;
		transition: opacity 1s ease-in-out;
	}

	.i2{
		max-width: 100%;
		max-height: 100%;
	}

	.i1:hover{
		opacity:0;
	}

顯示如下:

做法是先讓div的長寬固定。兩圖最大長寬皆設為100%，符合div的大小。讓i1的position: absolute;並將i1的opacity設為1，hover時設為0，就會看到其下的i2。以下解釋postion及transition。

position

position參數是定義位置，有以下幾種:

position:static; 這是預設值，照著瀏覽器預設的配置。
position:relative; 相對應原來位置，需設定top、bottom、left、right。例如以下元件及css code: <div class="css7_3"></div>
.css7_3{ position: relative; left: 100px; width:100px; height:100px; background: #aa00aa; border: 1px solid red; }
position:fixed; 表示位置固定不變一樣需設定top、bottom、left、right。例如加上以下元件及css code。 <div class="css7_4">Fixed</div>
.css7_4{ position: fixed; top: 300px; left:5em; color: gold; text-align:center; width:100px; height:100px; background: #0000ff; border: 1px solid #f00; }

Fixed
可見無論怎麼移動他都在固定位置。
position:absolute;這是表示其位置相對應其父元件，有點像是fixed，只是對應的是父元件。例如以下之元件及css code。 <div class="css7_5"> <div class="css7_6">absolute</div> </div>
.css7_5{ position: relative; width:300px; height:300px; background: #0000ff; border: 1px solid #f00; } .css7_6{ position: absolute; top: 100px; right:0px; text-align:center; width:100px; height:100px; background: #00ff00; border: 1px solid #f00; }

absolute
position: sticky;是相對於滑動軸位置。如下例； <div class="css7_7"> 太多字不列出 <p class="css7_8">Bridge Inspection Routing Problem</p> </div>
.css7_7{ position: relative; text-align:center; background: #00ff00; border: 1px solid #f00; height:200px; overflow: auto; } .css7_8{ position: sticky; top: 10px; left: 50px; text-align:center; height:auto; background: pink; border: 1px solid #f00; }

Abstract:

Bridge Inspection Routing Problem
This paper presents a study on routing problems associated with bridge inspection tasks. In the evaluatedproblems, a bridge inspection team must depart from the depot, visit bridges, and eventually return tothe depot. Since a single inspection team may require several days to perform this task, the inspectorsmust find lodging accommodations during the inspection period. This problem becomes a special type ofvehicle routing problem (VRP). Two types of scenarios are established for the bridge inspection problem. In the first scenario, only one inspection team is evaluated, and in the second scenario, more than oneinspection team and a specific inspection duration are assessed. The goal of this study is to determineoptimal routes and to find accommodations that minimize the total inspection cost, including the traveland lodging costs. The problem is solved using an ant colony optimization (ACO) algorithm. In addition, alocal search method is proposed for improving the quality of the solutions. Three benchmark datasets aregenerated to estimate the performance of the proposed method. First, a combination of the ACO parametervalues that yielded overall good results is determined, and subsequently the proposed method is appliedto the benchmarks. The results indicate that the proposed process yield promising solutions within areasonable time frame. IntroductionThe collapse of the Silver Bridge over Ohio River in the UnitedSates in 1967 caused serious injuries and deaths, and induced theattention to the safety concerns of old bridges. In recent years,developed countries have reached the stage of aging bridges andhave begun allocating considerable amounts of funds to worksrelated to bridge inspection and maintenance. For example, theUnited States has spent nearly 78 million dollars of maintenancefunds and 131 million dollars of reserve funds for inspecting andreinforcing the nation’s 570,000 bridges during 1992–2011. Thismeans an average of 5.2 million dollars per year of maintenanceexpenses and 8.2 million dollars per year of reserve funds are spenton bridge inspection and rehabilitation [1]. In the Netherlands, an average annual maintenance cost is 37 million euros for concretebridges, 7 million euros for steel bridges, and 10 million eurosfor movable bridges [2]. The Australian Government reserved over$200 million Australian dollars from the 2015–2016 budget forupgrading or replacing aged bridges throughout New South Wales[3]. In Scotland, 350,000 pounds were allocated from the 2014 bud-get for undertaking annual bridge maintenance condition surveys[4], and more than 700,000 pounds were assigned for bridge struc-tural maintenance during 2015 [5].

可見無論怎麼移動捲動軸都會在固定位置。
position

transition

transition是讓網頁在固定時間長度平緩的進行改變，語法是
transition: 性質時間速度 delay
可以只給性質時間或性質時間速度。之前的範例是改變opacity性質，在1s時間內，速度特性是ease-in-out。再看以下例子:

	<div class="css7_9"></div>

	.css7_9{
		width:100px;
		height:100px;
		background: #a9bcff;
		border: 1px solid #f00;
		transition: width 2s;
		transition-delay: 1s;
	}

	.css7_9:hover{
		width: 500px;
	}

Hover here

速度特性有以下選擇:

ease: 預設值，開始與結束慢，中間快。
linear: 從頭到尾速度相同。
ease-in: 開始慢。
ease-out: 結束慢。
ease-in-out: 開始與結束慢
cubic-bezier(n,n,n,n): 自訂速度曲線函數。

此外，使用transition-delay: 1s;指令表示要等待一秒才開始進行。

使用圖形作為背景

若要將圖形當作容器的背景，可以以下方式，請先找一張適合當作背景的圖。

	<div class="css7_10">這不是一個好範例，因為背景圖案太複雜</div>

	.css7_10{
		width: 500px;
		height: 500px;
		color: white;
		font-size: 26px;
		font-weight: bold;
		text-align: center;
		line-height: 500px;
		border: 1px solid blue;
		background-image: url(./images/bg1.jpg);
	}

這不是一個好範例，因為背景圖案太複雜

圖形的放置預設值為XY向重複填滿，其他的選擇為加上以下:

background-repeat: repeat-x;僅X向重複
background-repeat: repeat-y;僅Y向重複
background-repeat: no-repeat;沒有重複，僅剩下原圖，再加上以下一行控制圖形位置:
- background-position: left top;
- 原則上位置請使用top、bottom、left、right、center等關鍵字組合來決定位置，例如:center、bottom right、left等。
- 可以使用background-size來設定圖片的顯示大小，有以下選擇:
  - background-size:auto;預設值，原圖片大小
  - background-size: width height;給寬高，例如200px 150px，若是只給一個數字則為寬，高為auto。
  - background-size: % %;表示容器長寬的百分比，若只給一數值表示寬，高為auto。
  - background-size: cover; 覆蓋容器，可能會拉伸或切除部分圖形。
  - background-size: contain;調整圖形大小使能看到全圖。
  - background-size: initial; 設定為原始性質。
  - background-size: inherit; 性質繼承自父元件。

例如:

	.css7_10_1{
		display: inline-block;
		width: 500px;
		height: 500px;
		color: white;
		font-size: 26px;
		font-weight: bold;
		text-align: center;
		line-height: 500px;
		border: 1px solid blue;
		background-image: url(./images/bg1.jpg);
		background-repeat: no-repeat;
		background-size: cover;
	}

background-size: cover;

background-size: contain;

使用圖形當作border

使用圖形當作border首先須有一個適合做為border的圖形，可以分為像一個九宮格，有四角四邊及中間部分，例如以下的圖形。

接著決定切片的數值，以及四邊要重複或拉伸，使用這個指令: border-image: url('./images/borderimage1.png') 30 stretch; stretch是拉伸，round是重複，之前的數值是切片位置，也可以使用百分比。
請看以下css code及其顯示結果:

	div.css7_11{
		text-variant: small-caps;
		text-align: justify;
		width: 5em;
		height: 1em;
		border: 30px solid transparent;
		padding: 5px 0px 0px 0px;
		border-image: url('./images/borderimage1.png') 60 stretch;
	}

佳節愉快!

看起來效果不怎麼好，再看以下例子:

	div.css7_12{
		text-variant: small-caps;
		text-align: justify;
		border: 50px solid transparent;
		padding: 0px 5px;
		border-image: url('./images/borderimage2.png') 45 round;
	}

This paper presents a study on routing problems associated with bridge inspection tasks. In the evaluatedproblems, a bridge inspection team must depart from the depot, visit bridges, and eventually return tothe depot. Since a single inspection team may require several days to perform this task, the inspectorsmust find lodging accommodations during the inspection period. This problem becomes a special type ofvehicle routing problem (VRP). Two types of scenarios are established for the bridge inspection problem. In the first scenario, only one inspection team is evaluated, and in the second scenario, more than oneinspection team and a specific inspection duration are assessed. The goal of this study is to determineoptimal routes and to find accommodations that minimize the total inspection cost, including the traveland lodging costs. The problem is solved using an ant colony optimization (ACO) algorithm. In addition, alocal search method is proposed for improving the quality of the solutions. Three benchmark datasets aregenerated to estimate the performance of the proposed method. First, a combination of the ACO parametervalues that yielded overall good results is determined, and subsequently the proposed method is appliedto the benchmarks. The results indicate that the proposed process yield promising solutions within areasonable time frame.

	div.css7_13{
		text-variant: small-caps;
		text-align: justify;
		border: 60px solid transparent;
		padding: 10px 0px;
		border-image: url('./images/borderimage3.png') 90 round;
	}

This paper presents a study on routing problems associated with bridge inspection tasks. In the evaluatedproblems, a bridge inspection team must depart from the depot, visit bridges, and eventually return tothe depot. Since a single inspection team may require several days to perform this task, the inspectorsmust find lodging accommodations during the inspection period. This problem becomes a special type ofvehicle routing problem (VRP). Two types of scenarios are established for the bridge inspection problem. In the first scenario, only one inspection team is evaluated, and in the second scenario, more than oneinspection team and a specific inspection duration are assessed. The goal of this study is to determineoptimal routes and to find accommodations that minimize the total inspection cost, including the traveland lodging costs. The problem is solved using an ant colony optimization (ACO) algorithm. In addition, alocal search method is proposed for improving the quality of the solutions. Three benchmark datasets aregenerated to estimate the performance of the proposed method. First, a combination of the ACO parametervalues that yielded overall good results is determined, and subsequently the proposed method is appliedto the benchmarks. The results indicate that the proposed process yield promising solutions within areasonable time frame.

	div.css7_14{
		text-variant: small-caps;
		text-align: justify;
		border: 70px solid transparent;
		padding: 10px;
		border-image: url('./images/borderimage4.jpg') 40% stretch;
	}

This paper presents a study on routing problems associated with bridge inspection tasks. In the evaluatedproblems, a bridge inspection team must depart from the depot, visit bridges, and eventually return tothe depot. Since a single inspection team may require several days to perform this task, the inspectorsmust find lodging accommodations during the inspection period. This problem becomes a special type ofvehicle routing problem (VRP). Two types of scenarios are established for the bridge inspection problem. In the first scenario, only one inspection team is evaluated, and in the second scenario, more than oneinspection team and a specific inspection duration are assessed. The goal of this study is to determineoptimal routes and to find accommodations that minimize the total inspection cost, including the traveland lodging costs. The problem is solved using an ant colony optimization (ACO) algorithm. In addition, alocal search method is proposed for improving the quality of the solutions. Three benchmark datasets aregenerated to estimate the performance of the proposed method. First, a combination of the ACO parametervalues that yielded overall good results is determined, and subsequently the proposed method is appliedto the benchmarks. The results indicate that the proposed process yield promising solutions within areasonable time frame.