は、私はそうのように定義されたCSSクラスを持っているCSS

Question

と背景画像を変換します。 CSSを使用して、このイメージを20 x 20から16 x 16のの現在のサイズから縮小する方法はありますか？だから、別のイメージを作るだけの選択肢はありません。

私はさまざまなサイトを検索してきましたが、何か不足しているような気がします。

任意のヘルプのためのThx！ ：D

Answer 1

まだ背景画像のサイズを変更することはできません.css3をサポートするブラウザでのみbackground-sizeプロパティを使用できます。

Answer 2

CSS 3でのみ、background-sizeと呼ばれています。ここで

Answer 3

は良い説明と記事です：http://css-tricks.com/how-to-resizeable-background-image/ それは技術的に背景画像はありませんが、それはJavaScriptとCSS3

Answer 4

の必要性これは尋ねたと以前に回答されているがなくなります。

Set size on background image with CSS?

あなたは 画像エディタで画像自体を編集する必要があり 、画像を大きくする必要がある場合。

あなたはimgタグを使用する場合は、 サイズを変更することができますが、あなたには、いくつかの他の コンテンツの背景であることを（そして、それは自分自身を繰り返すことはしません 画像が必要な場合、それはあなたに 望ましい結果が得られないでしょう あなたが望むように）...

言われているように、おそらく、サイズ変更された次元でイメージを提供するために、PHPページなどを作成することができます。

.yourDivClass{ 
    background:url(/getImage.php?w=16&h=16&image=my_icon.png); 
} 

getImage.php

<?php 
$filename="../images/".$_REQUEST['image']; 
smart_resize_imageFile(
    $filename, 
    $_REQUEST['w'], 
    $_REQUEST['h'], 
    true, 
    'browser', 
    false 
); 


function smart_resize_imageFile($file, $width = 0, $height = 0, $proportional = false, $output = 'file', $delete_original = true, $use_linux_commands = false){ 
    if ($height <= 0 && $width <= 0) { 
     return false; 
    } 

    $info = getimagesize($file); 
    $image = ''; 

    $final_width = 0; 
    $final_height = 0; 
    list($width_old, $height_old) = $info; 

    if ($proportional) { 
     if ($width == 0) $factor = $height/$height_old; 
     elseif ($height == 0) $factor = $width/$width_old; 
     else $factor = min ($width/$width_old, $height/$height_old); 

     $final_width = round ($width_old * $factor); 
     $final_height = round ($height_old * $factor); 

    } 
    else { 
     $final_width = ($width <= 0) ? $width_old : $width; 
     $final_height = ($height <= 0) ? $height_old : $height; 
    } 

    switch ($info[2]) { 
     case IMAGETYPE_GIF: 
     $image = imagecreatefromgif($file); 
     break; 
     case IMAGETYPE_JPEG: 
     $image = imagecreatefromjpeg($file); 
     break; 
     case IMAGETYPE_PNG: 
     $image = imagecreatefrompng($file); 
     break; 
     default: 
     return false; 
    } 

    if ($info[2] == IMAGETYPE_GIF) 
     $image_resized = imagecreate($final_width, $final_height); 
    else 
     $image_resized = imagecreatetruecolor($final_width, $final_height); 

    if (($info[2] == IMAGETYPE_GIF) || ($info[2] == IMAGETYPE_PNG)) { 
     $trnprt_indx = imagecolortransparent($image); 

     // If we have a specific transparent color 
     if ($trnprt_indx >= 0) { 

     // Get the original image's transparent color's RGB values 
     $trnprt_color = imagecolorsforindex($image, $trnprt_indx); 

     // Allocate the same color in the new image resource 
     $trnprt_indx = imagecolorallocate($image_resized, $trnprt_color['red'], $trnprt_color['green'], $trnprt_color['blue']); 

     // Completely fill the background of the new image with allocated color. 
     imagefill($image_resized, 0, 0, $trnprt_indx); 

     // Set the background color for new image to transparent 
     imagecolortransparent($image_resized, $trnprt_indx); 


     } 
     // Always make a transparent background color for PNGs that don't have one allocated already 
     elseif ($info[2] == IMAGETYPE_PNG) { 

     // Turn off transparency blending (temporarily) 
     imagealphablending($image_resized, false); 

     // Create a new transparent color for image 
     $color = imagecolorallocatealpha($image_resized, 0, 0, 0, 127); 

     // Completely fill the background of the new image with allocated color. 
     imagefill($image_resized, 0, 0, $color); 

     // Restore transparency blending 
     imagesavealpha($image_resized, true); 
     } 
    } 

    imagecopyresampled($image_resized, $image, 0, 0, 0, 0, $final_width, $final_height, $width_old, $height_old); 
    if ($delete_original) { 
     if ($use_linux_commands) 
     exec('rm '.$file); 
     else 
     @unlink($file); 
    } 

    switch (strtolower($output)) { 
     case 'browser': 
     $mime = image_type_to_mime_type($info[2]); 
     header("Content-type: $mime"); 
     $output = NULL; 
     break; 
     case 'file': 
     $output = $file; 
     break; 
     case 'return': 
     return $image_resized; 
     break; 
     default: 
     break; 
    } 

    switch ($info[2]) { 
     case IMAGETYPE_GIF: 
     imagegif($image_resized, $output); 
     break; 
     case IMAGETYPE_JPEG: 
     imagejpeg($image_resized, $output); 
     break; 
     case IMAGETYPE_PNG: 
     imagepng($image_resized, $output); 
     break; 
     default: 
     return false; 
    } 

    return true; 
} 
?> 

Answer 5

これは、あなたが...

を探していたもののように聞こえるしない場合があります。しかし、私は一度<img />タグを使用して終了し、heightとwidth属性を変更望んだ通りに。